饼状图

改变颜色

  1. data: [
  2.   {
  3.     value: 335,
  4.     name: "生态补助",
  5.     itemStyle: {
  6.       normal: {
  7.         color: "#ECD220",
  8.       },
  9.     },
  10.   },
  11.   { value: 310, name: "迁葬补助" },
  12.   { value: 234, name: "惠民补助" },
  13. ],

饼图旋转

便于指示线的显示完整

  1. series: [
  2.   {
  3.     name: "测试饼图",
  4.     startAngle: 160, //起始角度
  5.     type: "pie",
  6.   },
  7. ],

避免标签重叠

  1. series: [
  2.   {
  3.     name: "测试饼图",
  4.     type: "pie",
  5.     startAngle: 90, //起始角度
  6.     radius: ["35%", "50%"],
  7.     //避免标签重叠 
  8.     avoidLabelOverlap: true,
  9.   },
  10. ],

饼图中间显示文字

  1. option:{
  2.     graphic: {
  3.     type: "text",
  4.     left: "center",
  5.     top: "center",
  6.     style: {
  7.       text: "火化量\n" + "100", //使用“+”可以使每行文字居中
  8.       textAlign: "center",
  9.       fill: "#fff",
  10.       width: 30,
  11.       height: 30,
  12.     },
  13.   }, //此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
  14. }

https://blog.csdn.net/zhengshaofeng1/article/details/106358494

柱状图

柱形图柱子自定义颜色

  1. series: [
  2.   {
  3.     name: "测试柱形图",
  4.     type: "bar",
  5.     itemStyle: {
  6.       normal: {
  7.         color: function (params) {
  8.           var colorList = ["#F08217", "#D417F0", "#ECD220"];
  9.           return colorList[params.dataIndex];
  10.         },
  11.         barBorderRadius: [0, 18, 18, 0],
  12.       },
  13.     },
  14.     barWidth: "20", //---柱形宽度
  15.     // barCategoryGap: "20%", //---柱形间距
  16.     data: [222, 478, 784],
  17.     label: {
  18.       show: true,
  19.       position: "insideTop",
  20.     },
  21.   }
  22. ],

https://www.shuzhiduo.com/A/q4zVwPGbJK/

地图显示框
https://github.com/apache/incubator-echarts/issues/959