關於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圖表是由很多組件進行組合而成，根據官網查看對應組件的配置，完成自己想要的圖形效果