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('某些行')；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] }，{ name: '香蕉，键入： '线路'，stack: '销量，area style : { normal : } { data :[2270，3456，5432，3423]}；echart.setOption(选项);});/script/head body div id=' someline '/div/body/html 3，实现效果图：

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

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

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