一、Echarts准备工作
Apache ECharts由官网下载对应的js文件即可,引入html里
二、使用步骤
1、准备好一个DOM元素,用来盛放图表,图表在页面上的宽度将由此DOM元素决定
<div id="main" style="width: 600px;height:400px;"></div>
2、初始化echart实例,固定写法
var myChart = echarts.init(document.getElementById('选择盛放图表的DOM元素'));
3、指定图表的配置项和数据 (根据文档提供示例找到option)
在官网上找到并调试自己需要的图表,最后将option配置代码复制下来即可
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
4、使用刚指定的配置项和数据显示图表,固定写法
myChart.setOption(option);