关于echarts那些事儿

引言：随着图表的应用增多，很多echarts的配置你一定要知道，官网上的配置和案例都比较多，这里会介绍一些简单的配置

echarts官网：https://echarts.apache.org/zh/tutorial.html

1.组件

      echarts都是组件的形式出现，官网上面有一张图很简单的展示了实例中各个组件

   

   每个组件都有自己的属性，可以根据自己想要的实现的样式进行组件属性的选择

 

2.实现线性渐变色

    效果图：

    实现主要配置 - 根据itemStyle,areaStyle属性设置

this.echartDie.setOption({
        title: {
          // text: 'ECharts 入门示例'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#000'
            }
          }
        },
        grid: {
          top: 10,
          left: 60,
          right: 60
        },
        legend: {
          bottom: 0
        }, // 显示数据
        xAxis: {
          type: 'category',
          name: '单位(天)',
          boundaryGap: false,
          data: [0, 5, 10, 15, 20]
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          splitNumber: 4,
          interval: 25,
          axisLabel: {
            formatter: '{value} %'
          }
        },
        series: [
          {
            data: [5, 100, 20, 45, 65],
            type: 'line',
            name: '实际使用量',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#23a4f5',
                lineStyle: {
                  color: '#23a4f5'
                }
              }
            }, // 线条样式
            areaStyle: {
              normal: {
                // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#c2e7ff80'
                  },
                  {
                    offset: 1,
                    color: '#ffffff80'
                  }
                ])
              }
            }
          },
          {
            data: [0, 25, 50, 75, 100],
            type: 'line',
            name: '理想适用度',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#43d3c2',
                lineStyle: {
                  type: 'dashed',
                  color: '#43d3c2'
                }
              }
            }
          }
        ]
      });

     

    3.实现不同座标系

  效果图  - 网格图

    利用splitLine实现网格，boundaryGap实现数据显示位置，居中还是在座标系上

 this.echartsDou.setOption({
        title: {
          // text: 'ECharts 入门示例'
        },
        // 鼠标移入提示文本
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#000'
            }
          }
        },
        // 网格信息
        grid: {
          top: 20,
          left: 60,
          right: 20,
          default: '#ccc'
        },
        legend: {
          bottom: 0
        }, // 显示数据
        xAxis: [
          {
            type: 'category',
            boundaryGap: false, // 数据显示位置
            data: [0, 10, 20, 35, 40, 50, 60],
            axisLabel: {
              formatter: '{value}M'
            },
            // name: '流量分段',
            // 网格样式
            splitLine: {
              show: true,
              lineStyle: {
                color: '#ebebeb',
                width: 1,
                type: 'solid'
              }
            }
          },
          {
            boundaryGap: '50%',
            type: 'category',
            boundaryGap: true,
            show: false,
            // 数据显示位置
            data: [10, 20, 35, 40, 50, 60],
            axisLabel: {
              formatter: '{value}M'
            },
            // 网格样式
            splitLine: {
              show: true,
              lineStyle: {
                color: '#ebebeb',
                width: 1,
                type: 'solid'
              }
            }
          }
        ],
        yAxis: {
          type: 'value',
          min: 0,
          max: 4000,
          splitNumber: 4,
          interval: 1000,
          // 网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ebebeb',
              width: 1,
              type: 'solid'
            }
          }
        },
        series: [
          {
            data: [3500, 1000, 2000, 4000, 3200, 2500, 1200],
            type: 'line',
            name: '实际使用量',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#8084D9',
                lineStyle: {
                  color: '#8084D9'
                }
              }
            } // 线条样式
          },
          {
            data: [1200, 2020, 1520, 820, 2000, 4100],
            name: '月平均DOU',
            xAxisIndex: 1,
            type: 'bar',
            barWidth: '20',
            // barCategoryGap: '100',
            itemStyle: {
              normal: {
                color: '#23a4f5',
                barBorderRadius: [4, 4, 0, 0]
              }
            }
          }
        ]
      });

 

4.实现圆的文字的居中

    效果图

利用title地位，和graphic定位实现

   this.echartsAnalyse.setOption({
        title: {
          text: 5,
          x: 'center',
          y: 'center',
          top: 150,
          left: 470,
          textStyle: {
            fontSize: 20,
            color: 'black',
            fontWeight: 800
          }
        },

        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        graphic: {
          type: 'text',
          left: '435px',
          top: '185px',
          // left: 'center',
          // top: 'center',
          z: 2,
          zlevel: 100,
          style: {
            text: '总流量池(个)',
            textAlign: 'center',
            fill: '#333',
            width: 100,
            height: 30,
            fontSize: 16
          }
        },
        color: ['#23a4f5', '#3cd1c0', '#ebdc52', '#ffa53b', '#8084d9'],
        legend: {
          orient: 'vertical',
          icon: 'circle',
          // left: 10,
          right: 700,
          top: 20,
          bottom: 20,
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },

        series: [
          {
            // name: '访问来源',
            type: 'pie',
            radius: ['60%', '78%'],
            center: ['30%', '53%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: '#fff'
              }
            },
            emphasis: {
              label: {
                show: false, // 中间不显示默认字体
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      });

   

    总结，echarts图表是由很多组件进行组合而成，根据官网查看对应组件的配置，完成自己想要的图形效果