【echarts】怒写一周ECharts项目后的总结

目录

1、自定义顶部文字

2、坐标轴相关属性

 2.1 当label过多或者过长，就会隐藏掉，这时可以采取旋转字体的方法。

 2.2 修改分割线的颜色 

3、自定义颜色

4、markLine 

4.1 画直线

4.2 画平均分 

---

1、自定义顶部文字

         label: {
              normal: {
                show: true,
                fontSize: 12,
                fontWeight: 'bold',
                color: '#46F7FB',
                position: 'top',
               // 自定义顶部文字写判断
                formatter: function(val) {
                  console.log('val', val);
                  if (val.dataIndex === 0) {
                    return `教育\n${val.data}`;
                  }else if(val.dataIndex === 1) {
                    return `医疗\n${val.data}`;
                  }else{
                    return `体育\n${val.data}`;
                  }
                },
              },
            },

2、坐标轴相关属性

  xAxis: {
        type: 'category',
        data: xData, // 间隔名字
        interval: 1,  //步长
        axisLine: { show: false }, // 轴线
        axisTick: { show: false }, // 刻度
        splitLine: { show: false }, // 分隔线
        axisLabel: { color: '#666666' },
  },
  yAxis: [
    {
      type: 'value',
      name: '分数',
      min: 0,
      max: 10,
      axisLine: { show: true },
      interval: 1,
      axisLabel: {
        formatter: '{value} '
      }
    }
  ],

 2.1 当label过多或者过长，就会隐藏掉，这时可以采取旋转字体的方法。

 xAxis: [
    {
      name: '二级指标',
      data: ['a均分', 'b均分', 'c均分', 'd均分', 'e均分', 'f均分'],
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        rotate: 45 // 设置轴标签旋转角度
      },
      axisLine: { show: true }, // 轴线
      axisTick: { show: true }, // 刻度
      splitLine: { show: true } // 分隔线
    },
   
  ],

2.2 修改分割线的颜色 

 

xAxis: [
    {
      name: '二级指标',
      data: ['a均分', 'b均分', 'c均分', 'd均分', 'e均分', 'f均分'],
      axisPointer: {
        type: 'shadow'
      },
      axisLine: { show: true }, // 轴线
      splitLine: {  // 分隔线设置颜色
        show: true,
        lineStyle: {
          color: ['red'],
          width: 1,
          type: 'solid'
        }
      },
      axisTick: { show: true }, // 刻度
      // splitLine: { show: true } // 分隔线
    }, 
  ],

  

3、自定义颜色

  itemStyle: {
              normal: {
                color: function(params) {
                  let colors = [
                    "#8F4CFF",
                    "#1195FF",
                    "#27BDB9",
                    "#FC5531",
                    "#9CDEFF",
                    "#1CC26A"
                  ];
                  return colors[params.dataIndex];
                }
              }
            },

4、markLine 

4.1 画直线

{
      type: 'line',
      markLine: {
        data: [
          [
            {
              xAxis: 'b均分',  //对应你的X轴
              yAxis: 8,
              symbol: 'circle',
              itemStyle: {
                normal: {
                  color: 'red' //线条颜色
                }
              }
            },
            {
              xAxis: 'e均分',
              yAxis: 6,
              symbol: 'circle',
              itemStyle: {
                normal: {
                  color: 'red' //线条颜色
                }
              }
            },
            {
              xAxis: 'd均分',
              yAxis: 7,
              symbol: 'circle',
              itemStyle: {
                normal: {
                  color: 'red' //线条颜色
                }
              }
            }
          ]
        ]
      }
    }

4.2 画平均分 

 会自动算所有分的平均分，展示。你也可以自由换数值。

 markLine: {
        //标线
        itemStyle: {
          normal: {
            label: {
              formatter: '均分',
              textStyle: {
                color: 'black',
                fontSize: 10,
                fontWeight: 500,
                padding: [0, 0, 0, 0] //文字间距
              }
            },
            lineStyle: {
              type: 'solid',
              color: {
                //设置渐变
                type: 'line',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'red ' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'blue' // 100% 处的颜色
                  }
                ]
              }
            }
          }
        },
        data: [
          {
            type: 'average'
          }
        ]
      }
    },

同时可输出echart代码 在官网中编辑

 console.log(11,JSON.stringify(option))

总结一些demo，已上传github。截图和实现代码，可点击下面的链接查看。👇 

https://github.com/PointWu/echarts-demo

当然也欢迎加入，咱们一起更新🐽