jQuery插件echarts实现的单折线图效果示例【附演示源码下载】

本文实例讲述了jQuery插件echarts实现的单折线图效果。分享给大家供大家参考，具体如下：

1、问题背景：

设计一个折线图，展示一个星期内水果销售量

2、实现源码：

！DOCTYPE html html head meta charset=' UTF-8 ' title echart-单折线图/title脚本类型=' text/JAVAScript ' src=' http : jquery-1。4 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : echart。js /脚本样式正文，html { width : 99%；高： 99%;字体系列： '微软雅黑；font-size : 12px} #线条{宽度：100%；高：99%;} /style脚本$(文档)。ready(function(){ var chart=document。getelementbyid(' line ')；var echart=echarts.init(图表);var选项={ title : { text : }水果销售量},工具提示： { trigger: 'axis' }，legend: { data:['水果销量] }，工具箱： {功能： {保存图像： } }，grid: { left: '3% '，right: '4% '，bottom: '3% '，containLabel: true }，xAxis : [ { type : 'category '，boundaryGap : false，data : ['星期一','星期二','星期三','星期四','星期五','星期六','星期日] } ]，yAxis : [ { type : 'value' } ]，series : [ { name: '水果销量，键入： '线路'，stack: '销量，areaStyle: { normal: {，data:[1270，6382，2091，1034，7890，6230，5210]} } }；echart.setOption(选项);});/script/head body div id=' line '/div/body/html 3，实现效果图：

附：完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。