在jQuery里面,实现一个折线图,【前端统计图】echarts实现单条折线图

​https://www.jianshu.com/p/0354a4f8c563​​。

现在要实现,Vue+Echarts实现一个折线图,打开之前的mint项目:

1:在项目里面安装echarts

cnpm install echarts --s

Vue+Echarts实现一个饼状图_饼状图

2:在需要用图表的地方引入

import echarts from 'echarts'

Vue+Echarts实现一个饼状图_jquery_02

3:打开my.vue

继续写代码,代码如下:

<template>
<!--为echarts准备一个具备大小的容器dom-->
<div id="main" style="width: 600px;height: 400px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: '',
data () {
return {
charts: '',
opinion:['男','女'],
opinionData:[
{value:335, name:'男'},
{value:310, name:'女'},

]
}
},
methods:{
drawPie(id){
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
tooltip: {
trigger: 'item',

},
legend: {
orient: 'vertical',
x: 'left',
data:this.opinion
},
series: [
{
name:'性别',
type:'pie',
radius:['50%','70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'blod'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:this.opinionData
}
]
})
}
},
//调用
mounted(){
this.$nextTick(function() {
this.drawPie('main')
})
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>

这个时候,可以看到,加载出的饼状图了,后面可以继续进行完善。

Vue+Echarts实现一个饼状图_折线图_03





作者:祈澈姑娘

90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,欢迎加入编程微刊主页qq群。