echarts5.0自定义图表：柱状图渐变、极坐标的半圆进度条，折线图的渐变叠加、南丁格尔玫瑰图半圆，以及类目名溢出换行方法

Fantasywt

已于 2022-05-06 09:32:16 修改

阅读量1.9k

点赞数 3

分类专栏：前端学习笔记文章标签： echarts javascript 前端 vue 开发语言

于 2022-03-08 19:25:19 首次发布

本文链接：https://blog.csdn.net/Fantasywt/article/details/123130583

版权

前端学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、类目名换行

具体效果见柱状图->渐变->图-1 智能监控系统一列

xAxis: {
          type: 'category',
          data:['小学', '中学', '大学', '幼儿园', '医院', '福利院', '其他', '智能监控系统'],
          axisLabel: {
            color: '#ffffff',
            // rotate: 40,
            interval: 0,
            // 类目名超过4个字换行
            formatter : function(params){
              let newParamsName = "";// 最终拼接成的字符串
              let paramsNameNumber = params.length;// 实际标签的个数
              let provideNumber = 4;// 每行能显示的字的个数
              let rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (let p = 0; p < rowNumber; p++) {
                  let tempStr = "";// 表示每一次截取的字符串
                  let start = p * provideNumber;// 开始截取的位置
                  let end = start + provideNumber;// 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;// 最终拼成的字符串
                }

              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },

三、柱状图

1、柱体渐变

图-1

drawLine() {
      // 引入数据
      let chartList = [8, 4, 7, 6, 5, 3, 3, 9];
      let myChart = this.$echarts.init(this.$refs.test_bar);
      let option = {
        // 设置颜色组
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          // 设置渐变
          colorStops: [{
            offset: 0, color: 'rgba(51,244,164,0.7)'
          }, {
            offset: 1, color: 'rgba(51,244,164,0)'
          }],
          global: false
        },
        // 设置图例
        legend: {
          show: true,
          left: 'right',
          icon: 'circle',
          textStyle: {
            color: 'rgb(255,255,255)'
          },
        },
        grid: {
          top: '12%',
          right: '2%',
          bottom: '15%',
          left: '10%'
        },
        xAxis: {
          type: 'category',
          data:['小学', '中学', '大学', '幼儿园', '医院', '福利院', '其他', '智能监控系统'],
          axisLabel: {
            color: '#ffffff',
            // rotate: 40,
            interval: 0,
            // 类目名超过4个字换行
            formatter : function(params){
              let newParamsName = "";// 最终拼接成的字符串
              let paramsNameNumber = params.length;// 实际标签的个数
              let provideNumber = 4;// 每行能显示的字的个数
              let rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (let p = 0; p < rowNumber; p++) {
                  let tempStr = "";// 表示每一次截取的字符串
                  let start = p * provideNumber;// 开始截取的位置
                  let end = start + provideNumber;// 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;// 最终拼成的字符串
                }

              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 10,
          interval: 2,
          name: '场所/个数',
          nameLocation: 'end',
          nameTextStyle: {
            color: '#ffffff'
          },
          splitLine: {
            show: false
            // lineStyle: {
            //   color: 'rgba(196,177,252,0.37)',
            //   type: 'dashed'
            // }
          },
          axisLabel: {
            color: '#ffffff',
            show: true
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        series: [
          {
            data: chartList,
            name: '监控场所/个数',
            type: 'bar',
            barWidth: 15,
            barCategoryGap: 0,
            itemStyle: {
              barBorderRadius: [10, 10, 5, 5]
            }
          },
        ]
      };
      option && myChart.setOption(option)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }

2、极坐标的使用----半圆进度条

图-1

option = {
        title: { // 中间标题、数据
          text: '标题', // 标题
          textStyle: {
            color: '#28BCFE',
            fontSize: '26px'
          },
          subtext: '副文本标题', // 副文本标题
          subtextStyle: {
            color: '#000',
            fontSize: '22px'
          },
          itemGap: 20, // 标题间的距离
          left: 'center',
          top: '43%'
        },
        grid: [
          {x: '7%', y: '7%', width: '33%', height: '100%'},
        ],
        // 极坐标系的角度轴
        angleAxis: {
          // 起始角度，180 也可以是 225
          startAngle: 180,
          max: 360,
          clockwise: true, // 逆时针
          // 隐藏刻度线
          show: false
        },
        // 极坐标系的径向轴
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false

          },
          axisTick: {
            show: false
          }
        },
        polar: {
          center: ['50%', '50%'],
          radius: '150%', //图形大小
        },
        series: [
          // 上层数据
          {
            type: 'bar',
            z: 2,
            // 数值
            data: [60],
            showBackground: true,
            backgroundStyle: {
              color: 'transparent'
            },
            coordinateSystem: 'polar',  // 使用极坐标系
            roundCap: true,
            barWidth: 10,
            barGap: '-100%',
            itemStyle: {
              opacity: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                 {
                    offset: 0,
                    color: '#25BFFF'
                  }, {
                    offset: 1,
                    color: '#5284DE'
                  }],
                shadowBlur: 5,
                shadowColor: '#f92a2a'
              }
            }
          },
          // 底层背景色
          {
            type: 'bar',
            z: 1,
            // 需要的圆环跨度大小，可以是180,270等
            data: [180],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 10,
            barGap: '-100%',
            itemStyle: {
              opacity: 1,
              color: '#093368'
            }
          }
          ,
        ],

      };

四、折线图

1、填充渐变

图-1

 drawLine() {
        let myLine = this.$echarts.init(this.$refs.line);
        let option = {
          color: ['rgb(255, 235, 0)','rgb(0,94,255)'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            textStyle: {
              color: '#ffffff'
            },
            // itemStyle: {
            //   color: ['rgb(255, 235, 0)','rgb(0,94,255)']
            // },
            data: ['销售额', '利润']
          },
          toolbox: {
            show: false
          },
          grid: {
            left: '1%',
            right: '2%',
            bottom: '0%',
            top: '10%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#b7b7b7'
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(206,206,206,0.15)',//刻度线的颜色
                }
              },
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
          ],
          yAxis: [
            {
              type: 'value',
              splitLine: {
                lineStyle: {
                  color: 'rgba(49,49,49,0.56)'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#b7b7b7'
                }
              },
              axisLine: {
                show:true,//是否显示轴线
                lineStyle: {
                  color: 'rgba(206,206,206,0.15)',//刻度线的颜色
                }
              },
              // 是否显示刻度线
              axisTick: {
                show: true
              }
            }
          ],
          series: [
            {
              name: '销售额',
              type: 'line',
              smooth: true,
              symbol:'circle',
              colorBy: 'series',
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(255, 235, 0,0.1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 235, 0,0)'
                  }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [220, 232, 201, 204, 190, 140, 200,203, 212, 190, 234, 190]
            },
            {
              name: '利润',
              type: 'line',
              smooth: true,
              symbol:'circle',
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(0,94,255,0.1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,94,255,0)'
                  }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [190, 202, 211, 234, 220, 201, 234, 190, 181, 194, 190,200]
            }
          ]
        };
        myLine.setOption(option);
        window.onresize = function() {
          myLine.resize();
        };
      }

2、叠加渐变

例图-要做到如下这样的效果

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBARmFudGFzeXd0,size_20,color_FFFFFF,t_70,g_se,x_16

areaStyle：在series中设置面积区域

series: [    {    
//这是一个颜色      
  areaStyle:{         
   color: 'pink'        
}       
//设置渐变色       
  areaStyle: {          
      opacity: 0.8,         
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   
           {     
              offset: 0,      
              color: 'rgb(128, 255, 165)'   
           },          
           {       
              offset: 1,   
              color: 'rgb(1, 191, 236)' 
            }   
         ])   
       }   
 }]

boundaryGap：在xAxis设置紧挨边缘

xAxis:{   
     type:"category",
     data:xDataArr, 
     boundaryGap:false   // 紧挨边缘
}

五、南丁格尔玫瑰图

1、半圆

图-1

option = {
  legend: {
    top: 'top'
  },
  toolbox: {
    show: false
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: ['10%','70%'],
      center: ['50%', '50%'],
      // 设置角度
      startAngle: 0,
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        // 最重要的是下面这里
        { value: 0, itemStyle: {normal: {color: "rgba(0,0,0,0)"}}},
        { value: 0, itemStyle: {normal: {color: "rgba(0,0,0,0)"}}},
        { value: 0, itemStyle: {normal: {color: "rgba(0,0,0,0)"}}},
        { value: 0, itemStyle: {normal: {color: "rgba(0,0,0,0)"}}},
        { value: 0, itemStyle: {normal: {color: "rgba(0,0,0,0)"}}},
      ]
    }
  ]
};

总结

暂未完结，后续遇到其他好看的图表会继续和大家分享，建议点赞+收藏+关注不迷路。

Fantasywt

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
echarts5.0自定义图表：柱状图渐变、极坐标的半圆进度条，折线图的渐变叠加、南丁格尔玫瑰图半圆，以及类目名溢出换行方法

echarts5.0——实现大屏炫酷图表，类目名溢出换行，南丁格尔玫瑰图半圆，折线图填充渐变、叠加渐变，极坐标半圆进度条，柱状图柱体渐变
复制链接

扫一扫