正文
Echart - 最好最强大效果最丰富的可视化图表插件
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
# 官网
http://echarts.baidu.com/# demo
http://echarts.baidu.com/gallery/index.html
Echart
npm install echarts --save
demo1 : 从简单的柱状图开始
核心知识点【setOption参数介绍】：http://echarts.baidu.com/option.html#title
var echarts = require('echarts');var myChart = echarts.init(document.getElementById('main'));myChart.setOption({
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
demo2 ： 异步数据加载和更新
ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得十分简单。
var echarts = require('echarts');
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
setTimeout(function () {
myChart.hideLoading();
// 填入数据
myChart.setOption({
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: [5, 20, 36, 10, 10, 20]
}]
});
},2000);
