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文档查看

转载于:https://juejin.im/post/5c983585e51d457689123ecf