echarts学习记录

版本3.0  参数

兼容IE7需要使用版本2.0

title

标题组件,包含主标题和副标题。

echarts标题

title: {text:'标题',
subtext:'副标题',
show:'true'}
legend

图例组件。图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。

echarts图例组件

legend: {
 data: ['委托', '审结', '退审'],  //图例的数据数组
 orient: 'vertical',  //图例列表的布局朝向
 right: 10,
 top: 20,
 itemWidth: 15,   //图例标记的图形宽
 },
版本2.0下,定位使用x,y
grid

直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。

echarts图表小、y轴

grid: {
 top: 12,     //grid 组件离容器上侧的距离
 right: 70    //grid 组件离容器右侧的距离
 }
版本2.0下,定位使用x,y,x2,y2
xAxis

直角坐标系 grid 中的 x 轴

yAxis

直角坐标系 grid 中的 y 轴

版本2.0下,需要设置min、max 或者 splitNumber,来设定显示的节点数

series
系列列表。每个系列通过 type 决定自己的图表类型

series: [{
 name: '委托',  //系列名称,用于tooltip的显示,legend 的图例筛选
 type: 'bar',   //柱形图
 data: [5, 20, 36, 10],
 itemStyle: {   //图形样式,normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式 normal: { color: '#1695f4' } }, }]

代码示例:

//获取画布
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">
  • 参数设置
  1. ie8 不能识别echarts中的true:2,move:1,false:0  这种写法,解决办法只需给true和false加上引号即可,如 ‘true’:2,move:1,’false’:0。
  2. echarts每个最后一个属性的后边不要带逗号;
  • 版本选择

echarts2  是可以在ie8  跑起来的;   echarts 3低版本也能跑,就是兼容问题多点。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注