最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery插件echarts实现的单折线图效果示例
时间:2017-05-22 编辑:简简单单 来源:一聚教程网
1、问题背景:
设计一个折线图,展示一个星期内水果销售量
2、实现源码:
代码如下 | 复制代码 |
body,html{ width: 99%; height: 99%; font-family:"微软雅黑"; font-size: 12px; } #line{ width:100%; height:99%; }
$(document).ready(function(){ varchart = document.getElementById("line"); 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, 7890, 6230, 5210] } ] }; echart.setOption(option); });
|
3、实现效果图:
-
下一个: js css3实现图片拖拽效果