ECharts 饼图颜色设置教程 - 3 种方式设置饼图颜色

阅读本书更多章节>>>>

ECharts 饼状图颜色设置教程

方法一：在 series 内配置饼状图颜色方法二：在 option 内配置饼状图颜色方法三：在 data 内配置饼状图颜色方法四：配置 ECharts 饼状图随机颜色

Charts 饼状图中的每个扇形颜色其实都可以自定义或者随机显示颜色。本文讲解 4 种配置修改 ECharts 饼图颜色的方法。

方法一：在 series 内配置饼状图颜色

series: [  itemStyle: {    normal: {      color: function (colors) {         var colorList = [                    '#fc8251',                    '#5470c6',                    '#9A60B4',                    '#ef6567',                    '#f9c956',                    '#3BA272'                  ];         return colorList[colors.dataIndex];       }     },   } ]

EChart.js 在 series 中设置饼状图颜色的 Demo 源代码：

option = {  tooltip: {    trigger: 'item'  },  legend: {  orient: 'vertical',  left  : 'left',  icon  :'circle'  },  series: [    {      name: 'Access From',      type: 'pie',           itemStyle: {    normal: {      color: function (colors) {         var colorList = [                    '#fc8251',                    '#5470c6',                    '#9A60B4',                    '#ef6567',                    '#f9c956'                  ];         return colorList[colors.dataIndex];       }     },   },      radius: '50%',      data: [        { value: 1048, name: 'Search Engine' },        { value: 735, name: 'Direct' },        { value: 580, name: 'Email' },        { value: 484, name: 'Union Ads' },        { value: 300, name: 'Video Ads' }      ],      emphasis: {        itemStyle: {          shadowBlur: 10,          shadowOffsetX: 0,          shadowColor: 'rgba(0, 0, 0, 0.5)'        }      }    }  ]};

效果

方法二：在 option 内配置饼状图颜色

 

option = {  tooltip: {    trigger: 'item'  },  legend: {  orient: 'vertical',  left  : 'left',  icon  :'circle'  },   color:['#fc8251','#5470c6','#9A60B4','#ef6567', '#999'],  series: [    {      name: 'Access From',      type: 'pie',  //itemStyle: {  //   normal: {  //     color: function (colors) {  //       var colorList = [  //                   '#fc8251',  //                   '#5470c6',  //                   '#9A60B4',  //                   '#ef6567',  //                   '#f9c956'  //                 ];  //       return colorList[colors.dataIndex];  //     }  //   },  // },      radius: '50%',      data: [        { value: 1048, name: 'Search Engine' },        { value: 735, name: 'Direct' },        { value: 580, name: 'Email' },        { value: 484, name: 'Union Ads' },        { value: 300, name: 'Video Ads' }      ],      emphasis: {        itemStyle: {          shadowBlur: 10,          shadowOffsetX: 0,          shadowColor: 'rgba(0, 0, 0, 0.5)'        }      }    }  ]};

方法三：在 data 内配置饼状图颜色

**data: [        { value: 917, name: '搜索引擎',itemStyle: {color:'#fc8251'}},        { value: 873, name: '微信朋友圈',itemStyle: {color:'#5470c6'}},        { value: 678, name: 'Feeds 广告',itemStyle: {color:'#91cd77'}},        { value: 583, name: '直接访问',itemStyle: {color:'#ef6567'}},        { value: 432, name: '口碑介绍',itemStyle: {color:'#f9c956'}}      ]**

EChart.js 在 data 中设置饼状图颜色的 Demo 源代码：

option = {  tooltip: {    trigger: 'item'  },  legend: {  orient: 'vertical',  left  : 'left',  icon  :'circle'  },   color:['#fc8251','#5470c6','#9A60B4','#ef6567', '#999'],  series: [    {      name: 'Access From',      type: 'pie',  //itemStyle: {  //   normal: {  //     color: function (colors) {  //       var colorList = [  //                   '#fc8251',  //                   '#5470c6',  //                   '#9A60B4',  //                   '#ef6567',  //                   '#f9c956'  //                 ];  //       return colorList[colors.dataIndex];  //     }  //   },  // },      radius: '50%',     data: [        { value: 917, name: '搜索引擎',itemStyle: {color:'#fc8251'}},        { value: 873, name: '微信朋友圈',itemStyle: {color:'#5470c6'}},        { value: 678, name: 'Feeds 广告',itemStyle: {color:'#91cd77'}},        { value: 583, name: '直接访问',itemStyle: {color:'#ef6567'}},        { value: 332, name: '电话销售',itemStyle: {color:'#f9c956'} },        { value: 432, name: '口碑介绍',itemStyle: {color:'#75bedc'}}      ],      emphasis: {        itemStyle: {          shadowBlur: 10,          shadowOffsetX: 0,          shadowColor: 'rgba(0, 0, 0, 0.5)'        }      }    }  ]};

 

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-02/152453.html，文章来源：网络cs，作者：欧阳逸，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！