[JavaScript知识库]React&&Echarts实现

一.学习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 () {
      // 关系图的边被点击时此方法被回调。
  });