echarts饼状图需求描述
渐变色饼状图，因为数据比较多所以legend需要可以滚动切换，饼状图区域有一个背景图片。
需求分析
legend设置滚动
legend滚动，我们可以设置type: "scroll"来实现滚动.通过page前缀参数来设置切换按钮的效果。
legend: {
height: '80%',
show: true,
type: "scroll",
orient: 'vertical',
right: '10%',
top: 'center',
bottom: 20,
pageButtonItemGap: 10,
pageButtonGap: 10,
pageIconColor: '#44e6fd',
pageIconInactiveColor: '#fbffff',
pageTextStyle: {
color: '#35ffff'
},
textStyle: {
color: '#fff',
fontSize: 14
},
itemWidth: 15,
itemHeight: 10,
itemGap: 16
}
饼状图居中标签
饼状图中间有数字和标题标签，当饼状图对应区域高亮后，显示对应区域的数值和名称。
我们通过emphasis下的label来实现
emphasis: {
label: {
show: true,
formatter: function (value, index) {
console.log(value)
return '{label|' + value.value + '}\n'
+ '{value|' + value.name + '}'
},
rich: {
label: {
padding: 0,
align: 'center',
verticalAlign: 'middle',
fontSize: FontChart(26),
color: '#0FFFFF',
},
value: {
align: 'center',
color: '#9AABD1',
padding: [0, 0, 10, 0],
fontSize: FontChart(16)
},
},
}
},
饼状图背景
我们通过graphic标签来添加图片，设置图片大小以及位置
graphic: [
{
type: 'image', // 图形元素类型
id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
z: 0, // 层叠
bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
left: '1%',
// left: 'center',
top: 'center',
style: {
image: img,// 该图片为https开头或base64在线链接图片
width: FontChart(250),
height: FontChart(250)
}
}
]
默认高亮
需要有一个病状区域是高亮的，所以我们需要激活其中一个区域
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0,//默认选中第0个
});
当鼠标移上去后需要取消设置的默认激活
我们设置一个字段，当这个字段是1的时候就表示已经激活了，其他值就是未激活，当鼠标移上去后，我们判断这个值是不是激活了，如果激活了则取消激活，并置空
let index = 1;
myChart.on('mouseover', function (e) {
if (index) {
index = null
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: 0,
});
}
});
完整代码
drawLine() {
var that = this
window.addEventListener('resize', this.drawLine)
let myChart = echarts.init(this.$refs.echarts)
var colors = this.colorList
var data = that.list
var option = {
color: colors,
legend: {
height: '80%',
show: true,
type: "scroll",
orient: 'vertical',
right: '10%',
top: 'center',
bottom: 20,
pageButtonItemGap: 10,
pageButtonGap: 10,
pageIconColor: '#44e6fd',
pageIconInactiveColor: '#fbffff',
pageTextStyle: {
color: '#35ffff'
},
textStyle: {
color: '#fff',
fontSize: 14
},
itemWidth: 15,
itemHeight: 10,
itemGap: 16
},
series: [
{
name: '服务呈现',
type: 'pie',
radius: ['55%', '65%'],
center: ['29%', '50%'],
label: {
position: 'center',
normal: {
show: false,
fontSize: 14,
position: 'center'
},
},
emphasis: {
label: {
show: true,
formatter: function (value, index) {
console.log(value)
return '{label|' + value.value + '}\n'
+ '{value|' + value.name + '}'
},
rich: {
label: {
padding: 0,
align: 'center',
verticalAlign: 'middle',
fontSize: FontChart(26),
color: '#0FFFFF',
},
value: {
align: 'center',
color: '#9AABD1',
padding: [0, 0, 10, 0],
fontSize: FontChart(16)
},
},
}
},
data: data
},
],
graphic: [
{
type: 'image', // 图形元素类型
id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
z: 0, // 层叠
bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
left: '1%',
// left: 'center',
top: 'center',
style: {
image: img,// 该图片为https开头或base64在线链接图片
width: FontChart(250),
height: FontChart(250)
}
}
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
let index = 1;//默认选中第二个
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0,//默认选中第0个
});
console.log(myChart)
myChart.on('mouseover', function (e) {
if (index) {
index = null
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: 0,
});
}
});
},
