1.了解ECharts
- ECharts简介:http://echarts.baidu.com/echarts2/doc/about.html
- ECharts主页:http://echarts.baidu.com/index.html
- ECharts文档:http://www.echartsjs.com/option.html#title
- ECharts实例:http://echarts.baidu.com/examples/#chart-type-line
2.尝试ECharts
>实际做一个柱状图Bar
1.先找一个最简单的实例:http://echarts.baidu.com/examples/editor.html?c=bar-simple 实例中给出的JavaScript代码:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
解析一下:
option:可以理解为外层容器,关于图像组件的参数等等都在里面申明定义。在后面会有一个myChart.setOption(option);这样的语句将其放到选定的容器中。(没错,这句话给出的代码里面并没有)
xAxis:文档解释>>直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。可以理解为设置X轴的对象,里面有很多相关的方法。
yAxis:文档解释>>直角坐标系 gr