Echart画折线图各标签讲解
2017-12-15 15:05
204 查看
option = { title: { text: '标签讲解',//图标标题 x: 'center'//水平居中 }, tooltip: {//提示框信息 axisPointer: { type: 'cross' } }, legend: {//图例信息 data:[ 'A','B','C'], top:40//图例位置(可设置top,bottom,left,right) }, grid: {//图的位置 top: 100, bottom: 50 }, xAxis: [ //x坐标轴信息 { name : '(下方x轴数据单位)',//坐标单位 data: [ "2013", "2014", "2015", "2016"]//坐标上数值 },{ name : '(上方x轴数据单位)', data: [ "2013", "2014", "2015", "2016"] } ], yAxis: [//y坐标轴信息 { name : '(y轴数据单位)',//坐标单位 type: 'value', min:600,//坐标起始值 max:1800 //坐标最大值 } ], series: [ {//A曲线 name:'A', type:'line', itemStyle:{ normal:{ color: "#d14a61" } //坐标圆点的颜色 }, lineStyle:{ normal:{ width:4,color: "#d14a61" }//线条的颜色及宽度 }, label: {//线条上的数字提示信息 normal: { show: true, position: 'top' } }, smooth: true,//线条平滑 data: [1180,1244,1207,1276] }, { name:'B', type:'line', itemStyle:{ normal:{ color: "#5793f3" } }, lineStyle:{ normal:{width:4, color: "#5793f3" } }, label: { normal: { show: true, position: 'bottom' } }, smooth: true, data: [1074,1448,1125,1570] },{ name:'C', type:'line', xAxisIndex: 1, itemStyle:{ normal:{ color: "#675bba" } }, lineStyle:{ normal:{width:4, color: "#675bba" } }, label: { normal: { show: true, position: 'bottom' } }, smooth: true, data: [887,997,854,711] } ] };
相关文章推荐
- 使用.NET中的XML注释(一) -- XML注释标签讲解
- Struts2 标签库讲解
- Android merge标签讲解与实例
- jstl 格式化数字标签讲解
- MyBatis(2):MyBatis标签以及对应的属性用法讲解
- NET中的规范标准注释(一) -- XML注释标签讲解
- echart折线堆叠图 Y轴数据不堆叠
- JSP和servlet讲解,问题总结(二)<meta>标签
- Struts2 标签库讲解
- 使用.NET中的XML注释(一) -- XML注释标签讲解
- Jsp中的自定义标签由浅到深详细讲解(转载)
- jstl 格式化时间日期标签讲解
- Struts2标签库讲解
- jQuery 循环遍历改变a标签的href(实例讲解)
- 常用struts2标签讲解(下)
- Struts2 标签库讲解
- 使用.NET中的XML注释 -- XML注释标签讲解
- php学习基础篇之对HTML页面里标签代码含义的讲解
- echart3.0实现折线图转折点闪烁效果
- 使用.NET中的XML注释(一) -- XML注释标签讲解