echarts的引入方法

数据可视化表使用echart trad-view…
使用步骤：（vue react）
1.引入第三方库 2.找到页面存在的一个元素进行初始化 3.设置配置
我们着重介绍一下echart
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
我们在项目中可以以两种方式来使用：
1.echarts-for-react第三方插件，图标展示，去npm官网安装一下两个插件：
npm install --save echarts-for-react
2.直接使用原生的echarts
npm install --save echarts
去echart官网里面看基本使用方法：https://www.echartsjs.com/zh/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

使用第三方插件

本代码是在react项目里面使用echarts-for-react来写的，并且使用了antd这个UI工具，这里展示的一个基本折线图的实现：
import React,{Component} from “react”;
import {Card} from ‘antd’
import ReactEcharts from ‘echarts-for-react’
class Echarts extends Component{
getOption(){
return{
xAxis: {
type: ‘category’,
boundaryGap: false,
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]
},
yAxis: {
type: ‘value’
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: ‘line’,
areaStyle: {}
}]
}
}
render(){
return(

)
}
}
export default Echarts;