Echart是一款图表插件，功能强大，使用简单。Echart官网：https://echarts.baidu.com/examples/#chart-type-line
本文介绍我使用过的折线图以及饼图。
1.折线图：
图表上可以浮动数据：
先贴上官网代码：
1option = { 2 title: { 3 text: '折线图堆叠' 4 }, 5 tooltip: { 6 trigger: 'axis' 7 }, 8 legend: { 9 data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] 10 }, 11 grid: { 12 left: '3%', 13 right: '4%', 14 bottom: '3%', 15 containLabel: true 16 }, 17 toolbox: { 18 feature: { 19 saveAsImage: {} 20 } 21 }, 22 xAxis: { 23 type: 'category', 24 boundaryGap: false, 25 data: ['周一','周二','周三','周四','周五','周六','周日'] 26 }, 27 yAxis: { 28 type: 'value' 29 }, 30 series: [ 31 { 32 name:'邮件营销', 33 type:'line', 34 stack: '总量', 35 data:[120, 132, 101, 134, 90, 230, 210] 36 }, 37 { 38 name:'联盟广告', 39 type:'line', 40 stack: '总量', 41 data:[220, 182, 191, 234, 290, 330, 310] 42 }, 43 { 44 name:'视频广告', 45 type:'line', 46 stack: '总量', 47 data:[150, 232, 201, 154, 190, 330, 410] 48 }, 49 { 50 name:'直接访问', 51 type:'line', 52 stack: '总量', 53 data:[320, 332, 301, 334, 390, 330, 320] 54 }, 55 { 56 name:'搜索引擎', 57 type:'line', 58 stack: '总量', 59 data:[820, 932, 901, 934, 1290, 1330, 1320] 60 } 61 ] 62};
图标头部：
1 title: { 2 text: '标题名称', //如“折线图堆叠” 3 textStyle: { //标题样式设置 4 color: '#000000', 5 fontSize: '18', 6 fontWeight: 'normal', 7 }, 8 x: '10px', 9 y: '10px' 10 }, 11 tooltip: { 12 trigger: 'axis' 13 }, 14 //图例颜色以及图例名称 15 color: ['#4B85CB', '#D98175', '#75CBA5', '#0EBCE8', '#778899'], 16 legend: { 17 18 data: ['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'], 19 //图例样式以及位置 20 textStyle: { 21 color: '#000000' 22 }, 23 x: 'center', 24 y: '15px' 25 26 },
X轴：
1 xAxis: { 2 type: 'category', 3 boundaryGap: false, 4 //这里是横轴显示内容，我这里用的是传递的数组数据，而非固定的星期几 5 data: [obj[0].Date, obj[1].Date, obj[2].Date, obj[3].Date, obj[4].Date, obj[5].Date, obj[6].Date], 6 axisLine: { 7 lineStyle: { 8 color: '#000000', 9 width: 1 //可以更改折现粗细 10 } 11 }, 12 axisLabel: { 13 show: true, 14 textStyle: { 15 color: '#000000' 16 } 17 } 18 },
Y轴：
1 yAxis: { 2 type: 'value', 3 axisLine: { 4 lineStyle: { 5 color: '#000000', 6 width: 1 7 } 8 }, 9 axisLabel: { 10 show: true, 11 textStyle: { 12 color: '#000000', 13 } 14 } 15 }, 16 //下面是数据展示 17 series: [ 18 { 19 name: '邮件营销', 20 type: 'line', 21 //这里的数据都是从后台取出的，数量要和X轴对应，此处也为7个值 22 data: [{ 23 value: obj[0].EmailNums, 24 label: { 25 normal: { 26 formatter: GetDataZero(obj[0].EmailNums) 27 } 28 } 29 }, { 30 value: obj[1].EmailNums, 31 label: { 32 normal: { 33 formatter: GetDataZero(obj[1].EmailNums) 34 } 35 } 36 }, { 37 value: obj[2].EmailNums, 38 label: { 39 normal: { 40 formatter: GetDataZero(obj[2].EmailNums) 41 } 42 } 43 }, { 44 value: obj[3].EmailNums, 45 label: { 46 normal: { 47 formatter: GetDataZero(obj[3].EmailNums) 48 } 49 } 50 }, { 51 value: obj[4].EmailNums, 52 label: { 53 normal: { 54 formatter: GetDataZero(obj[4].EmailNums) 55 } 56 } 57 }, { 58 value: obj[5].EmailNums, 59 label: { 60 normal: { 61 formatter: GetDataZero(obj[5].EmailNums) 62 } 63 } 64 }, { 65 value: obj[6].EmailNums, 66 label: { 67 normal: { 68 formatter: GetDataZero(obj[6].EmailNums) 69 } 70 } 71 }] 72 //其他的省略了…… 73 74 }, 75 76 } 77 ]
GetDataZero只是我写的一个转换方法，因为在折线图浮动数据中值为0时显示的是“-”，我就写了这个
1<script> 2 function GetDataZero(value) { 3 if (value > 0) { 4 return value; 5 } else { 6 return 0; 7 } 8 } 9 </script>