echarts实现饼图阴影，改变饼图的颜色，改变引导线的颜色

一、实现效果如下：

二、需求分析：

> 1、饼图阴影，就是在series中再加图层
> 2、引导线labelLine->normal->lineStyle
> 3、改变饼图的颜色后端返值＋itemStyle或者自己定义在option中color数组
> 4、设置不同标识文字的颜色，在rich中写nameColor的样式
>formatter: function (value) {let data = value.data;return ("{nameColor|" +data.name +"\n\n" +"}{green|" +data.value +"}{tColol|/" +"(条)}" +"\n\n");
},

三、源码：

<template><div class="operation-monitoring"><div class="power-monitoring-bottom"><divid="myChart"class="my-charts"style="width: auto; height: 400px"></div></div></div>
</template>
<script>
export default {data() {return {};},created() {},watch: {},mounted() {let that = this;that.drawEcharts();},methods: {drawEcharts() {// 如果后端传颜色的话，要是数据改变，感觉需要后端传// let data = [//   { name: "呼和浩特", value: 5.6, itemStyle: { color: "#684599" } },//   { name: "包头", value: 1, itemStyle: { color: "#D14874" } },//   { name: "鄂尔多斯", value: 0.8, itemStyle: { color: "#A8CE3B" } },//   { name: "乌兰察布", value: 0.5, itemStyle: { color: "#D6793E" } },//   { name: "阿拉善盟", value: 0.5, itemStyle: { color: "#39ABCD" } },//   { name: "锡林郭勒盟", value: 3.8, itemStyle: { color: "#394EA1" } },//   { name: "乌海", value: 3.8, itemStyle: { color: "#27A969" } },//   { name: "巴彦卓尔", value: 3.8, itemStyle: { color: "#D7CE29" } },// ];let data = [{ name: "呼和浩特", value: 5.6 },{ name: "包头", value: 1 },{ name: "鄂尔多斯", value: 0.8 },{ name: "乌兰察布", value: 0.5 },{ name: "阿拉善盟", value: 0.5 },{ name: "锡林郭勒盟", value: 3.8 },{ name: "乌海", value: 3.8 },{ name: "巴彦卓尔", value: 3.8 },];let option = {color: ["#684599","#D14874","#A8CE3B","#D6793E","#39ABCD","#394EA1","#27A969","#D7CE29","rgba(0,0,0,0)",],series: [// 主要展示层的{radius: ["45%", "60%"],center: ["50%", "50%"],type: "pie",hoverAnimation: false, //鼠标移入变大label: {alignTo: "edge",formatter: function (value) {let data = value.data;return ("{nameColor|" +data.name +"\n\n" +"}{green|" +data.value +"}{tColol|/" +"(条)}" +"\n\n");},minMargin: 15,edgeDistance: 10,lineHeight: 15,rich: {nameColor: {fontSize: 20,color: "#889BB4",},green: {fontSize: 20,marginBottom: 10,color: "#4BA6B2",},tColol: {fontSize: 14,color: "#889BB4",},},},labelLine: {length: 15,length2: 0,maxSurfaceAngle: 80,normal: {lineStyle: {color: "#1B4668", // 改变标示线的颜色},},},labelLayout: function (params) {var isLeft = params.labelRect.x < myChart.getWidth() / 2;var points = params.labelLinePoints;// Update the end point.points[2][0] = isLeft? params.labelRect.x: params.labelRect.x + params.labelRect.width;return {labelLinePoints: points,};},data: data,},{name: "外边框",type: "pie",clockWise: false,clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大radius: ["64%", "64%"], //边框大小center: ["50%", "50%"], //边框位置data: [{value: 10,itemStyle: {normal: {borderWidth: 15, //设置边框粗细borderColor: "rgb(9,37,71, 0.5)", //边框颜色},},},],},],};var stackingBar = this.$echarts.init(document.getElementById("myChart"));stackingBar.setOption(option);},},
};
</script>

还有一位大佬实现如下图的样式，看了一下是利用到 type: “gauge”，仪表盘之类的，我把外边框的代码复制出来了，直接改就行，如下：

 {name: "外边框",type: "pie",clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大center: ["50%", "50%"],radius: ["70%", "70%"],label: {normal: {show: false,},},data: [{value: 9,name: "",itemStyle: {normal: {borderWidth: 2,borderColor: "#0b5263",},},},],},{name: "",type: "gauge", //主要是这里，仪表盘之类的radius: "80%",startAngle: 0,endAngle: 359.9,splitNumber: 100,hoverAnimation: true,axisTick: {show: false,},splitLine: {length: 20,lineStyle: {width: 4,color: "#fff",},},axisLabel: {show: false,},pointer: {show: false,},axisLine: {lineStyle: {opacity: 0,},},detail: {show: false,},data: data,},

大佬的地址：https://blog.csdn.net/wangxinxin1992816/article/details/88909962

echarts实现饼图阴影，改变饼图的颜色，改变引导线的颜色相关推荐

echarts 修改饼图引导线配置
labelLine属性为饼图引导线配置 labelLine:{ normal:{ length: 5, // 修改引导线第一段的长度length2: 15, // 修改引导线第二段的长度lineSty ...
Echarts 饼图设置标签颜色（单个标签颜色、多个标签颜色）
1 使用详解 (1)series.data.label.color 说明:单个标签颜色. (2)series.label.color 说明:所有标签颜色. 2 设置单个标签颜色 2.1 实现代码 &l ...
echarts笔记-2，嵌套饼图
嵌套饼图和单个饼图差别不大,需要之一的是,如果使用嵌套饼图,只能有一个标题和一个图例,因为虽然是两个饼图,但是是一个echarts实例需要注意的地方: 1. 注意外外部饼图和内部饼图的关系,如果外部 ...
echarts中饼图引导线加圆点
推荐网址该网站里面有很多大佬贡献的图表,总能找到你想要的点击链接抵达 (1)我们需要完成的样子如下 (2)echarts主要部分配置 series: [ label: { //饼图图形上的文本标签 ...
ECharts 饼图数据放在饼图内部显示
1.业务需求将数据显示在饼图内部,格式化百分比显示,鼠标放上去显示具体名称和数值原样式如下 2.业务实现调整代码如下,核心语句已标记注释 option = {title: {text: 'Ref ...
计算机excel在三维饼图改字,从图形样式、文字数据到颜色更改，教你如何用Excel制作饼形图...
在Excel中用饼形图来展示一些数据看起来会更加直观,为了让没制作过饼形图的Excel用户了解如何制作饼形图,学习啦小编为大家整理的Excel产品使用方法,一起来看看吧! 添加饼形图 ●先在Excel ...
Echarts 饼图视觉引导线隐藏和显示
由于饼图的数据过多,文字比较密集所以决定对数量超过10的数据隐藏其视觉引导线.直接上代码 var arr1=[{value: "10", name: "资金运用" ...
Echarts --- 可视化练习（pie04 --- 饼图标签的对齐方式）
Echarts - 可视化练习(pie04 - 饼图标签的对齐方式) 人生路漫漫,其实人生路上所经历的挫折磨难,换个角度想,也并非全是坏事, 纵然结果不尽人意,但至少还是能让我们从中领悟到什么,能成长 ...
echarts折现图柱状图饼图资料大全整理
line(折线图) line: { name: ...,//折现名称 coordinateSystem: 'cartesian2d', // 坐标系 xAxisIndex: 0, yAx ...

echarts实现饼图阴影，改变饼图的颜色，改变引导线的颜色

一、实现效果如下：

二、需求分析：

三、源码：

echarts实现饼图阴影，改变饼图的颜色，改变引导线的颜色相关推荐

最新文章

热门文章