最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery插件echarts实现的多折线图效果示例,附demo源码下载
时间:2017-05-21 编辑:简简单单 来源:一聚教程网
1、问题背景:
设计一个折线图,折线图展示苹果、香蕉的销售量
2、实现代码:
代码如下 | 复制代码 |
body,html{ width: 99%; height: 99%; font-family:"微软雅黑"; font-size: 12px; } #someline{ width:100%; height:99%; }
$(document).ready(function(){ varchart = document.getElementById("someline"); varechart = echarts.init(chart); varoption = { title: { text:'水果销售量' }, tooltip : { trigger:'axis' }, legend: { data:['苹果','香蕉'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left:'3%', right:'4%', bottom:'3%', containLabel:true }, xAxis : [ { type :'category', boundaryGap :false, data : ['第一季度','第二季度','第三季度','第四季度'] } ], yAxis : [ { type :'value' } ], series : [ { name:'苹果', type:'line', stack:'销量', areaStyle: {normal: {}}, data:[1270, 6382, 2091, 1034] }, { name:'香蕉', type:'line', stack:'销量', areaStyle: {normal: {}}, data:[2270, 3456, 5432, 3423] } ] }; echart.setOption(option); });
|
3、实现效果图:
附:完整实例代码点击此处本站下载。
-
下一个: 网站建设开发设计的前途如何
相关文章
- jQuery多选框选择数量限制方法 03-23
- 解决jquery mouseout mouseover 多次执行问题 03-18
- jquery中多个$(document).ready()的执行顺序 10-03
- jQuery ystep插件实现多流程分步、多步骤 06-11
- JQuery 单选按钮和多选按钮状态判断详解 01-03
- Jquery利用is(“:checked”)判断多选框是不是被选中 11-29