版本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低版本也能跑,就是兼容问题多点。