echart php mysql简书_ECharts在React中的使用

首先通过npm安装Echarts，也可写进package.json中install

npm install echarts --save-dev

新建一个ReactEcharts组件

import React, { Component } from 'react'

/**

* 第一个import echarts是必须的

* 第二个是引入的具体的一个图表类型 (可选)

* 第三个是表的title(可选)

* 第四个是表的工具栏组件相关的行为(可选，

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具)

*/

import echarts from 'echarts/lib/echarts'

import 'echarts/lib/chart/bar'

import 'echarts/lib/component/title'

import 'echarts/lib/component/toolbox'

class ReactEcharts extends Component {

constructor(props) {

super(props)

}

componentDidMount() {

//初始化图表

this.initChart();

}

componentWillReceiveProps(nextProps) {

//更新图表

this.initChart(nextProps);

}

/*生成图表，做了判断，如果不去判断dom有没有生成，

每次更新图表都要生成一个dom节点*/

initChart(props) {

let option = props === undefined ? this.props.option : props.option;

// 基于准备好的dom，初始化echarts实例

let myChart = echarts.getInstanceByDom(document.getElementById('main'));

if( myChart === undefined){

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

}

// 绘制图表，option设置图表格式及源数据

myChart.setOption(option);

}

render() {

return (

//width和height可由属性值传入

);

}

};

export {ReactEcharts as default};

新建一个HomeChart.js文件，在需要的地方引入ReactEcharts组件

import React, { Component } from 'react';

import classNames from 'classnames';

import ReactEcharts from 'scripts/components/ReactEcharts';

class HomeChart extends Component {

constructor(props) {

super(props)

this.state = {

//option可由函数初始化

option: option1

};

}

componentDidMount() {

// this.getOptions(option1)

}

//数据发生变化后更新option，由state管理

getOptions(options) {

this.setState({option: options});

}

render() {

let {option} = this.state;

return (

查询

)

}

};

export default HomeChart

ECharts 配置option示例

myChart.setOption({

color: 'blue',

title: {

left: 'center',

text: '订单利润报表',

subtext: 'data from tnet'

},

toolbox: {

right: '40px',

// top: '15px',

feature: {

dataView: {show: true, readOnly: false},

magicType: {

show: true,

type: ['line', 'bar']

},

restore: {show: true},

saveAsImage: {

show: true,

type: 'png'

},

}

},

tooltip : {

trigger: 'axis',

axisPointer : { // 坐标轴指示器，坐标轴触发有效

type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'

}

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis : [

{

type : 'category',

data : [10, 22, 20, 334, 390, 330, 220, 220, 200, 334,

39, 33, 220, 220, 200, 334, 390, 330, 220, 220,

20, 34, 390, 330, 220, 220, 200, 334, 390, 330, 220],

axisTick: {

alignWithLabel: true

},

axisLabel: {

interval:0,

rotate:60

}

}

],

yAxis : [

{

type : 'value'

}

],

series : [

{

name: '收入',

type: 'bar',

stack: '总量',

barWidth: '60%',

label: {

normal: {

show: true,

position: 'top'

}

},

data:[10, 22, 20, 334, 390, 330, 220, 220, 200, 334,

39, 33, 220, 220, 200, 334, 390, 330, 220, 220,

20, 34, 390, 330, 220, 220, 200, 334, 390, 330, 220]

}

]

})

配置项

标题 title

title.text => 主标题文本

title.link => 主标题文本超链接

title.textStyle => 主标题样式

title.subtext => 副标题文本

title.sublink => 副标题文本超链接

title.left(top、right、bottom) => 标题位置

工具栏组件 toolbox

toolbox.left (top、right、bottom) => 工具栏组件位置

toolbox.feature => 各工具配置项

toolbox.feature.saveAsImage => 保存为图片

toolbox.feature.restore => 配置项还原

toolbox.feature.dataView => 数据视图工具，可以展现当前图表所用的数据，编辑后可动态更新

toolbox.feature.dataZoom => 数据区域缩放 ,目前只支持直角坐标系的缩放

toolbox.feature.magicType => 动态类型切换

绘图网格 grid

grid.left(top、right、bottom) => grid 组件位置

grid.containLabel => grid 区域是否包含坐标轴的刻度标签

grid.show => 是否显示直角坐标系网格

提示框组件tooltip(提示框组件可以设置在全局或局部)

tooltip.trigger => 触发类型('item'|'axis'|'none')

tooltip.axisPointer => 坐标轴指示器配置项

tooltip.triggerOn => 提示框触发的条件('mousemove'|'click')

tooltip.enterable => 鼠标是否可进入提示框浮层中，默认为false

系列列表 series

series[i].type => 系列图表类型

series[i].name => 系列名称，用于tooltip的显示

series[i].label => 图形上的文本标签

series[i].label.position => 标签的位置

series[i].label.rotate => 标签旋转

series[i].label.fontSize => 标签的字体大小

series[i].label.color => 标签的颜色

series[i].data => 系列中的数据内容数组

series[i].xAxisIndex => 使用的x轴的 index，在单个图表实例中存在多个x轴的时候有用

series[i].yAxisIndex => 使用的y轴的 index，在单个图表实例中存在多个y轴的时候有用

grid 中的 x 轴 x Axis

xAxis.type => 坐标轴类型('value'|'category'|'time'|'log')

xAxis.nameLocation => 坐标轴名称显示位置

xAxis.nameRotate => 坐标轴名字旋转，角度值

xAxis.scale => 是否是脱离 0 值比例,设置成 true 后坐标刻度不会强制包含零刻度

grid 中的 y 轴 yAxis(与x轴相同)

图例组件 legend(图例组件展现了不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列不显示)

legend.data => 图例的数据数组

legend.left (top、right、bottom) => 图例组件位置

legend.padding => 图例的内边距

legend.itemGap => 图例每项之间的间隔