这篇文章，超人鸭写两个echarts的饼图，并带有联动的效果。上次超人鸭写过一篇写echarts柱状图的，每个配置项基本都介绍了，有兴趣的伙伴可以去看看哦。文章地址:写个ECharts，带详细配置项解释
先看看这篇文章要做的东西，上图:
image.png
左右两个饼图，两开花，现在我点击左边饼图的另一项数据之后:
image.png
右边饼图的数据也跟着改变，达到联动的效果，接下来超人鸭就上代码，通过注释来讲解。然后本次是在vue中使用echarts，在vue中引入跟使用echarts也很简单，伙伴们如果不清楚自己查一下哦。然后也会用到本地模拟的json数据，通过axios请求，超人鸭有一篇文章也讲到了:vue实现搜索功能且关键字高亮,这里就不会再讲了。
- 首先html结构:
<template>
<div class="pieChar-index">
<div class="pieChar-left">
<div id="pieCharLeft"></div>
</div>
<div class="pieChar-right">
<div id="pieCharRight"></div>
</div>
</div>
</template>
- 先写左边的饼图，一些配置项超人鸭也会详细解释:
//画图的方法定义在methods里，然后在mounted调用
drawPieLeft () {
//初始化echarts实例
let myPieLeft = this.$echarts.init(document.getElementById('pieCharLeft'))
myPieLeft.setOption({ //注入配置
title: { //设置标题
text: '驱动能源概况',
textStyle: { // 标题字体样式
fontSize: 16
}
},
tooltip: { //提示
trigger: 'item', // 鼠标放到图形上触发
formatter: '{b} : {d}%' // 提示框浮层内容格式器,在饼图里面，b代表数据项的名称，d代表这个数据的百分比
},
legend: { //图例，就是下面的小圆点，点击可以控制某项数据出现与消失
left: 'center', // 位置
top: '80%',
itemGap: 20, // 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 14, // 图例标记的图形宽度
itemHeight: 12,
borderRadius: 5, // 统一设置四个角的圆角大小
data: [
{name: '电动', icon: 'circle'}, // 这里需要设置icon为circle上面的圆角才会有效果
{name: '汽油', icon: 'circle'},
{name: '天然气', icon: 'circle'},
{name: '生物', icon: 'circle'},
{name: '其他', icon: 'circle'}
]
},
calculable: true,
series: [
{
name: '',
type: 'pie',
radius: [70, 100], // 设置成圆环
center: ['50%', '45%'], //设置饼图的位置
color: [ // 饼图的数据颜色会按这个数组循环配对
'#288add',
'#3fb1e3',
'#1fc33a',
'#f14f4a',
'#8d44ad'
],
label: { // 文字平时不显示，鼠标放上去再显示
normal: {
show: false,
position: 'center' // 文字的位置在中心
},
emphasis: { // 鼠标放上去
show: true,
textStyle: { // 设置字体的样式
fontSize: '20'
}
}
},
lableLine: { //文字的线不显示
normal: {
show: false
}
},
data: [
{ value: '235', name: '电动' },
{ value: '335', name: '汽油' },
{ value: '135', name: '天然气' },
{ value: '25', name: '生物' },
{ value: '75', name: '其他' }
]
}
]
})
let _this = this // 保存指向vue实例的this指针
myPieLeft.on('click', params => { // 点击每个图形触发的事件，params里面含有该条数据的各个属性
_this.drawPieRight(params.name)
})
}
最重要的就是最下面的点击事件，这个echarts提供的api，点击某一条数据，参数params就是那一条数据的各个配置，超人鸭传了一个 params.name就是上面series定义的data里面的name。就是‘电动、汽油...’这些
- 点击时触发drawPieRight方法，并传入一个参数,然后我们要通过这个参数去变化数据，先看看本次我模拟的json数据:
{
"ret":true,
"pieCharData":{
"电动":[
{"value":30,"name":"深圳"},
{"value":40,"name":"南京"},
{"value":20,"name":"兰州"},
{"value":10,"name":"北京"},
{"value":50,"name":"上海"}
],
"汽油":[
{"value":10,"name":"深圳"},
{"value":20,"name":"南京"},
{"value":60,"name":"兰州"},
{"value":10,"name":"北京"},
{"value":30,"name":"上海"}
],
.......
}
}
- 数据是一个大对象，里面包含五个对象，对象的key值跟我们左边的饼图data里面的name对应
- 先拿到这个json数据
//在mounted里面
this.$axios.get('../../../../static/mock/pieChar.json')
.then((res) => {
//把数据先赋值给data里的allRightData
this.allRightData = res.data.pieCharData
}).then(() => {
//然后调用画右边饼图的方法，初始化时传一个 '电动'
this.drawPieRight('电动')
})
- 画右边饼图，drawPieRight:
drawPieRight (name) {
//拿到传过来的name，把他当成key值，就可以拿到具体每一项的数据
let queryData = this.allRightData[name]
let titleText = `${name}设备在各个城市的使用情况`
let myPieRight = this.$echarts.init(document.getElementById('pieCharRight'))
myPieRight.setOption({
title: {
text: titleText,
textStyle: {
fontSize: 15
},
left: '2%'
},
tooltip: {
trigger: 'item', // 鼠标放到图形上触发
formatter: '{b} : {d}%' // 提示框浮层内容格式器,在饼图里面，b代表数据项的名称，d代表这个数据的百分比
},
legend: {
left: 'center',
top: '80%',
itemGap: 20, // 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 14, // 图例标记的图形宽度
itemHeight: 12,
borderRadius: 5, // 统一设置四个角的圆角大小
data: [
{name: '深圳', icon: 'circle'},
{name: '南京', icon: 'circle'},
{name: '兰州', icon: 'circle'},
{name: '北京', icon: 'circle'},
{name: '上海', icon: 'circle'}
]
},
calculable: true,
series: [
{
name: '',
type: 'pie',
roseType: 'radius', // 把饼图变成南丁格尔图
radius: [30, 100], // 设置成圆环
center: ['50%', '45%'],
color: [
'#42cccc',
'#0080ff',
'#27ae61',
'#f6a0bb',
'#e6bb0e',
'#288add'
], // 颜色将根据饼图的区域个数循环
label: {
normal: {
show: true
}
},
lableLine: {
normal: {
show: true
}
},
data: queryData
}
]
})
}
在方法的开始拿到要展示的数据，然后下面的echarts基本与左边的饼图一样，有点不同的就是在series中添加roseType: 'radius'这个配置，把饼图变成南丁格尔图:
image.png
到这里超人鸭就完成了两个饼图之间的联动，这种需求也是非常常见的，有什么不足之处，希望大家多多指教哦。
网友评论