饼图 图例百分比, 饼图渐变

饼图 图例百分比, 饼图渐变

 

 

$scope.energyRatioData  = [
{value: 1048, name: '报警'},
{value: 735, name: '故障'},
{value: 580, name: '正常'},
{value: 484, name: '离线'},
]


$scope.energyRatioOption = { tooltip: { trigger: 'item', backgroundColor: 'rgba(30,41,54,.8)', // axisPointer: {//坐标轴指示器配置项 // lineStyle: { // color: '#F50077' // } // }, borderColor: 'transparent', textStyle: { color: '#fff' } }, legend: { right: 50, top: 10, orient: 'vertical', textStyle: { color: '#A9D1EC', fontSize: 12 }, itemGap: 20, itemWidth: 6, itemHeight: 6, icon: 'circle', data: $scope.energyRatioLegend, // 使用回调函数 formatter: function(name) { // var data=[]; var data = $scope.energyRatioData; var total = 0; var tarValue; for (var i = 0, l = data.length; i < l; i++) { total += Number(data[i].value); //console.log(typeof total) if (data[i].name == name) { tarValue = Number(data[i].value); } } // console.log(tarValue) // console.log(total) var p = ((tarValue / total) * 100);//两个饼图所以需要*200-看图数量类推 // return name + " " + " " + "<span>" + p.toFixed(1) + "%" + "</span>"; return name + " " + p.toFixed(1) + "%" ; } }, color: ['#00C8FD','#00FFC8','#FD6B79','#FD9F02', '#0077D4'], series: [ { type: 'pie', center: ['28%', '42%'], radius: ['80%', '65%'], itemStyle: { borderRadius: 5, color: function (params) { var colorList = [ { "c1": 'rgba(65,140,106,1)', //管理 "c2": 'rgba(61,255,160,1)' }, { "c1": 'rgba(134,60,186,1)', //实践 "c2": 'rgba(61,57,157,1)' }, { "c1": 'rgba(251,17,79,1)',//操作 "c2": 'rgba(145,56,76,1)' }, { "c1": 'rgba(232,108,110,1)',//操作 "c2": 'rgba(150,95,97,1)' }, { "c1": 'rgba(78,76,47,1)',//操作 "c2": 'rgba(253,166,33,1)' } ] // console.log(colorList) // console.log([params.dataIndex]) let colorItem = colorList[params.dataIndex] if (colorItem) { return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 offset: 0, color: colorItem.c1 }, { offset: 1, color: colorList[params.dataIndex].c2 }]) } else { return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 offset: 0, color: 'rgba(78,76,47,1)' }, { offset: 1, color: 'rgba(253,166,33,1)' }]) } // borderColor: '', // borderWidth: 2 } }, avoidLabelOverlap: false, hoverOffset: 5, label: { normal: { show: false, position: 'center' }, emphasis: { show: false, textStyle: { fontSize: '18' } } }, labelLine: { normal: { show: false } }, data: $scope.energyRatioData // data: enterPriseList } ] };

 

上一篇:Vue.extemd实现命令调用式组件


下一篇:边框与圆角