echarts學習分享

作項目的過程當中，沒法避免的要用到前端數據可視化，但實現出來的效果大都不是很美觀；E-charts可以幫助咱們很好地實現前端的可視化處理，並且效果很好。

E-charts有着如下優勢：

1. E-charts是開源圖表設計工具
2. E-charts使用簡單，在官網中爲咱們封裝了js，只要會引用就會獲得完美的展現效果
3. 種類多，echarts實現簡單，各種圖形都有；相應的模板，還有豐富的API及文檔說明，很是詳細
4. 兼容性好，基於html5，有着良好的動畫渲染效果。

經過npm安裝echarts

npm install echarts --save
複製代碼

將你所要的E-charts效果寫到一個組件中

import echarts from 'echarts'
import React, { Component } from 'react'
/**
 * 雙y軸折線圖
 * @author 小淵
 * @time 2019-03-14
 * @param  {Object} data 具體參數  --必選參數
 * @param  {String} id 組件id      --必選參數
 * @param  {String} yDataName2 y2軸標題      --非必選參數
 * @param  {String} yDataName1 y1軸標題      --非必選參數
 * @param  {Array}  yDataRight 在y2軸的標題,用於判斷yAxisIndex爲0仍是1（0左y軸1右y軸） 爲一個數組   --非必選參數
 * 
 */
 
//計算最大值 爲了美觀，將最大值取整十，並不讓最高的值超過最上面的刻度
const calMax = (arr, type = 0) => {
  let max = 0;
  arr.forEach((el) => {
    el.yAxisIndex === type && el.data.forEach((el1) => {
      if (!(el1 === undefined || el1 === '')) {
        if (max < el1) {
          max = el1;
        }
      }
    })
  })
  let maxint = Math.ceil(max / 9.5);    //不讓最高的值超過最上面的刻度
  let maxval = maxint * 10;             //讓顯示的刻度是整數
  return maxval;
}

let myChart;

class LineEChart extends Component {

  constructor(props, context) {
    super(props, context)
  }

  // 將配置參數寫進一個函數，便於調用
  fun = () => {
    let data = this.props.data

    myChart = echarts.init(document.getElementById(this.props.id));
    // 繪製圖表
    myChart.setOption({
      grid: {   
        left: 50,   //距離左邊的距離
        right: 50, //距離右邊的距離
        bottom: '14%',//距離下邊的距離
        top: '22%', //距離上邊的距離
      },
      color: ['#3063FF', '#2EC7E6', '#FF5500', '#FFDD33', '#2FC25B'],   //折線顏色
      tooltip: {   //提示框組件
        trigger: 'axis',    //item
        axisPointer: {
          type: 'cross',
        },
      },
      legend: {
        itemWidth: 12,  //指標線長度
        itemGap: 24,   //指標距離
        itemHeight: 1, //指標高度，爲1可去掉圓點
        data: data.title,  //指標name
        right: 20,         //指標位置
      },
      xAxis: [
        {
          type: 'category',
          data: data.xData,
          axisLine: {
            lineStyle: {
              color: '#545454'
            }
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: this.props.yDataRight && (data.yDataName1 || '次數') || '',  //預設左y軸name
          min: 0,
          max: calMax(data.yData, 0),
          interval: calMax(data.yData, 0) / 5,       //左右y軸一樣作法，解決分割線不一致問題
          axisLabel: {
            formatter: '{value}'
          },
          axisLine: {
            lineStyle: {
              // color: '#5a6',
              opacity: 0,   //y軸顯示 0 - 1
            }
          },
          axisTick: {   //刻度線顯示
            show: false
          },
          splitLine: {
            lineStyle: {   //分割線樣式
              type: 'dashed'
            },
          },
        },
        {
          type: 'value',
          name: this.props.yDataRight && (data.yDataName2 || '人數') || '',
          min: 0,
          max: calMax(data.yData, 1),
          interval: calMax(data.yData, 1) / 5,
          axisLabel: {
            formatter: '{value}'
          },
          axisLine: {
            lineStyle: {
              opacity: 0,   //y軸顯示 0 - 1
            }
          },
          axisTick: {   //刻度線顯示
            show: false
          },
          splitLine: {
            lineStyle: {    //右y軸隱藏分割線，避免與左y軸分割線重複
              opacity: 0,
            },
          },
        }
      ],
      series: data.yData,
    });
  }

  componentWillUpdate() {
    this.fun();
  }

  render() {

    window.onresize = () => {   // 解決窗口大小改變時圖形不跟着變化問題
      myChart.resize();
    }

    return <div id={this.props.id} style={{ height: 400 }}></div>
  }
}


export default LineEChart;
複製代碼

在須要頁面引入該組件

// 若是數據格式不一致，須要進行處理
let data = {
  "title":["總訪問量","會話接入總量","未接入會話量","排隊放棄量","會話接入人數"],
  "xData":["20190312","20190313","20190314","20190315","20190316","20190317","20190318","20190319","20190320","20190321","20190322","20190323","20190324","20190325"],
  "yData":[
    {"data":[0,0,4,0,0,0,0,0,63,51,27,0,0,0],"name":"總訪問量","type":"line","yAxisIndex":0,"smooth":true,"symbol":"circle","symbolSize":2},
    {"data":[23,63,40,83,6,0,27,14,137,59,15,0,0,0],"name":"會話接入總量","type":"line","yAxisIndex":0,"smooth":true,"symbol":"circle","symbolSize":2},
    {"data":[0,10,6,17,12,0,3,0,39,21,0,0,0,0],"name":"未接入會話量","type":"line","yAxisIndex":0,"smooth":true,"symbol":"circle","symbolSize":2},
    {"data":[0,10,5,14,12,0,3,0,39,21,0,0,0,0],"name":"排隊放棄量","type":"line","yAxisIndex":0,"smooth":true,"symbol":"circle","symbolSize":2},
    {"data":[3,8,6,9,3,0,5,2,15,12,5,0,0,0],"name":"會話接入人數","type":"line","yAxisIndex":1,"smooth":true,"symbol":"circle","symbolSize":2}]
  }
<LineEChart id={'lineEChart'} data={data} yDataRight={['會話接入人數']} />
複製代碼

組件參數說明：

字段	含義	備註
id	組件id	惟一，必填
data	組件數據	必填
yDataName1	y1軸標題	非必填
yDataName2	y2軸標題	非必填
yDataRight	使用y2軸數據的指標name	用於判斷yAxisIndex爲0仍是1(0左y軸1右y軸)，爲一個數組，非必填參數

若是提示框須要顯示更多的內容，能夠在 tooltip中經過函數來解決

formatter: function (parmes) {
  console.log(parmes)   //parmes 將返回更多的數據，你也能夠加入一些固定的字符串返回
}
複製代碼

你也能夠在E-charts上查看效果，或者修改配置參數進行嘗試，demo地址

更多demo分享

1. 環餅圖 demo地址
2. 散點圖 demo地址
3. 多折線圖 demo地址
4. 多維雷達 demo地址
5. 傳播鏈路圖 demo地址

學習E-charts

E-charts官方文檔,若是沒法在官方文檔中快速找到你想要的屬性，能夠經過w3c文檔查看