vue 使用Echarts 环形图 自定义legend formatter 富文本标签
main.js 引入echarts
// 引入echarts
import Echarts from 'echarts'
Vue.prototype.$echarts = Echarts
<template>
<div>
<!-- 为ECharts准备一个具备大小（宽高) -->
<div id="ringDiagram" :style="{width: '217px',height:'254px'}"></div>
</div>
</template>
<script>
实现如图效果
export default {
name: 'cart',
data () {
return {
msg:'这是一个购物车页面',
dataList:[
{value:335, name:'应交人民币'},
{value:310, name:'应交支付宝'},
{value:234, name:'应交微信'},
{value:135, name:'应交信用卡'},
{value:1548, name:'应交其他'}
]
}
},
mounted () {
this.ringDrag();
},
methods:{
ringDrag(){
const _dataList=this.dataList;
//console.log(_dataList)
// 基于准备好的dom，初始化echarts实例
const myChart = this.$echarts.init(document.getElementById('main'));
const option = {
tooltip: {
show:true,
trigger: 'item',
formatter: "{a} <br/>{b}: {c}"
},
legend: {
orient: 'vertical',
left: 8,
// y:'bottom',
// right: '7%',
bottom: '23%',
data:this.dataList.name,
padding:[0,10,0,0],
selectedMode:false,
itemWidth:10,
itemHeight:10,
icon:'circle',
textStyle:{
fontSize:13,
width:160,
rich:{
a:{
align:'left',
color:'#77899c',
padding:[0,0,0,10],
},
b:{
align:'right',
color:'#eb3a53',
},
c:{
align:'right',
color:'#4ed139',
},
}
},
tooltip: {
show: true
},
formatter: function (name) {
let _index=0;
//console.log(_dataList)
_dataList.forEach((item,i)=>{
//console.log(item.value,name)
if(item.name == name){
_index = i;
}
});
let arr;
if(name=='应交人民币'){
arr = [
'{a|'+name+'}',
'{b|￥'+_dataList[_index].value+'}'
]
}else{
arr = [
'{a|'+name+'}',
'{c|￥'+_dataList[_index].value+'}'
]
}
//console.log(_index)
//console.log(_data1[_index].value)
// 注意，换行仍是使用 '\n'。
return arr.join('');
}
},
graphic:{
type:'text',
left:'center',
top:'23%',
z:2,
zlevel:100,
style:{
text:'1244',
x:100,
y:100,
textAlign:'center',
fill:'#77899c',
}
},
series: [
{
// name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
// 绝对位置，相对于容器左侧 10px, 上侧 10 px
// position: [0, -50],
center: [100, 100],
avoidLabelOverlap: false,
hoverAnimation: false,
legendHoverLink:false,
silent:false,
label: {
normal:{
show: false,
position:'center',
formatter:(params)=>{
//var _total=0;
// _total+=params.data.value;
// dataTextArry.forEach((item,i)=>{
// _total+=item.value
// console.log(_total)
// });
//console.log(1);
// console.log(set)
return '1111';
},
},
textStyle:{
fontSize:20,
color:'green'
},
emphasis: {
show: false,
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle:{
color:function(params){
//console.log('1',params)
var colorList=['#4ed139','#289cf4','#fdca57','#ff9e48','#2c3f58']
return colorList[params.dataIndex];
}
},
data:this.dataList
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
}
