一.学习echarts

在当今网页，插入图表显示数据是一件波澜不惊的事情，学会echarts的使用，让你再项目开发和网站设计都是锦上添花的功能。

心情指数图

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  CanvasRenderer
]);

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

const labelRight = {
  position: 'right'
};
option = {
  title: {
    text: 'Bar Chart with Negative Value'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: 80,
    bottom: 30
  },
  xAxis: {
    type: 'value',
    position: 'top',
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  yAxis: {
    type: 'category',
    axisLine: { show: false },
    axisLabel: { show: false },
    axisTick: { show: false },
    splitLine: { show: false },
    data: [
      'ten',
      'nine',
      'eight',
      'seven',
      'six',
      'five',
      'four',
      'three',
      'two',
      'one'
    ]
  },
  series: [
    {
      name: 'Cost',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        formatter: '{b}'
      },
      data: [
        { value: -0.07, label: labelRight },
        { value: -0.09, label: labelRight },
        0.2,
        0.44,
        { value: -0.23, label: labelRight },
        0.08,
        { value: -0.17, label: labelRight },
        0.47,
        { value: -0.36, label: labelRight },
        0.18
      ]
    }
  ]
};

option && myChart.setOption(option);

echart代码讲解：1.初始化

var echart = echarts.init(dom节点,主题)

定义选项option

var option = {


title标题

legend图例

color调试版本

tooltip提示

xAxis轴线X

yAxis轴线Y

series系列数据

}

1.标题title

text文本

2.图例legend

{data:[“name1″,”name2”]}

3.提示tooltip

name: “问答题”

4.X轴线

{data:[“x1″,”x2”,…]}

5.Y轴线

{data:[“y1″,”y2”,…]}

6.系列数据

bar

{


name:’名称’,

type:’bar’,

}

详细可去参考echarts官方文档：

https://echarts.apache.org/zh/api.html#echarts

二.react使用echarts

在react中，导入引人的依赖包（需要的必须引入），在return中插入如：

<div id='main' style = { {  width: '100%', height: 666,}}> </div >

给你的图表“main”设置id属性，style样式等，如果层级低，可设置z-index提高层级，这样就能显示你自己定义的echarts图表，在根据自己的风格设置图表的属性和样式。

三.echarts.on方法

绑定事件处理函数。

ECharts 中的事件有两种，一种是鼠标事件，在鼠标点击某个图形上会触发，还有一种是 调用

dispatchAction

后触发的事件。每个 action 都会有对应的事件，具体见

action

和

events

的文档。

如果事件是外部

dispatchAction

后触发，并且 action 中有 batch 属性触发批量的行为，则相应的响应事件参数里也会把属性都放在 batch 属性中。

参数：

• 
eventName


  事件名称，全小写，例如
  
'click'

  ，
  
'mousemove'

  ,
  
'legendselected'


  
  注：
  
  ECharts 2.x 中会使用
  
config

  对象中的
  
CLICK

  等属性作为事件名称。在 ECharts 3 中统一使用跟 dom 事件一样的全小写字符串作为事件名。

• 
query


  可选的过滤条件，能够只在指定的组件或者元素上进行响应。可为
  
string

  或者
  
Object

  。

  如果为
  
string

  表示组件类型。格式可以是 ‘mainType’ 或者 ‘mainType.subType’。

  chart.setOption({
      // ...
      series: [{
          type: 'graph',
          nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
          edges: [{source: 0, target: 1}]
      }]
  });
  chart.on('click', {dataType: 'node'}, function () {
      // 关系图的节点被点击时此方法被回调。
  });
  chart.on('click', {dataType: 'edge'}, function () {
      // 关系图的边被点击时此方法被回调。
  });