版本3.0 参数
兼容IE7需要使用版本2.0
title
标题组件,包含主标题和副标题。

title: {text:'标题',
subtext:'副标题',
show:'true'}
legend
图例组件。图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。
![]()
legend: {
data: ['委托', '审结', '退审'], //图例的数据数组
orient: 'vertical', //图例列表的布局朝向
right: 10,
top: 20,
itemWidth: 15, //图例标记的图形宽
},
版本2.0下,定位使用x,y
grid
直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。

grid: {
top: 12, //grid 组件离容器上侧的距离
right: 70 //grid 组件离容器右侧的距离
}
版本2.0下,定位使用x,y,x2,y2
xAxis
直角坐标系 grid 中的 x 轴
yAxis
//获取画布
var myChart = echarts.init(document.getElementById('pageFlowChart'));
//设定配置项
var option = {
title: {},
tooltip: {},
toolbox: {},
calculable: true,
legend: {
data: ['委托', '审结', '退审'],
orient: 'vertical',
},
grid: {},
xAxis: {
type: 'category',
data: ["9月", "10月", "11月", "12月"]
},
yAxis: {
type: 'value',
data: [0, 20, 40, 60, 80]
},
series: []
};
// 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
事件:
resize 刷新布局,宽、高
同一个页面有多个图表,需要写在同一个 resize 里,否则只有一个生效
myChart.resize()
window.onresize = function() {
myChart1.resize()
myChart2.resize()
}
版本2.0下,通过设置window.onresize=myChart.resize()来实现自动resize
dispatchAction,触发图表行为,例如图例开关legendToggleSelect, 数据区域缩放dataZoom,显示提示框showTip等等action
//重置option
myChart.dispatchAction({
type: 'reload'
});
兼容到IE8,需要的配置
- meta 配置
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- 参数设置
- ie8 不能识别echarts中的true:2,move:1,false:0 这种写法,解决办法只需给true和false加上引号即可,如 ‘true’:2,move:1,’false’:0。
- echarts每个最后一个属性的后边不要带逗号;
- 版本选择
echarts2 是可以在ie8 跑起来的; echarts 3低版本也能跑,就是兼容问题多点。
