JS插件:ECharts-数据图表化
Posted 常想一二
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS插件:ECharts-数据图表化相关的知识,希望对你有一定的参考价值。
一、官网
官网: http://www.echartsjs.com/
上手:http://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
二、例子
实例:
1. 先引入:echarts.common.min.js /或者: echarts.js
1 <head> 2 <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 3 <meta charset="utf-8" /> 4 <script src="/Scripts/jquery-2.js"></script> 5 <script type="text/javascript" src="/Scripts/echarts.min.js"></script> 6 <title>EChart图片测试</title> 7 </head>
2. 为ECharts准备一个具备大小的DIV容器
<body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> </body>
3. js:设置参数初始化图表
1 <script> 2 window.onload = function () { loadChasrt() }; 3 function loadChasrt() { 4 var dataX = ["2018-12-14 14:00:21", "2018-12-15 14:00:21", "2018-12-18 11:00:21", "2018-12-18 13:59:58"]; 5 var CrackValue =[2,1,12,11] ; 6 var TiltAngle =[12,11,22,11] ; 7 var Temperature = [16, 11, 12, 15]; 8 var titlename = \'长度-角度关系图\'; 9 var option = { 10 title: { text: titlename, x: \'center\', y: \'top\' }, 11 tooltip: { trigger: \'axis\' }, 12 legend: { data: [], x: \'left\', y: \'top\' }, 13 dataZoom: { show: true, start: 0 }, 14 grid: { left: \'3%\', right: \'4%\', bottom: \'3%\', containLabel: true }, 15 toolbox: { feature: { saveAsImage: {}, dataZoom: {}, restore: {} } }, 16 xAxis: { type: \'category\', boundaryGap: false, data: dataX }, 17 yAxis: { type: \'value\' }, 18 series: [] 19 }; 20 option.legend.data = ["长度", "角度", "温度"]; 21 option.yAxis = [ 22 { boundaryGap: [0, \'50%\'], type: \'value\', name: \'长度\', position: \'left\', offset: 0, splitNumber: 0, splitLine: { show: true, } }, 23 { boundaryGap: [0, \'50%\'], type: \'value\', name: \'角度\', position: \'right\', offset: 0, splitNumber: 0, splitLine: { show: true, } }, 24 { boundaryGap: [0, \'50%\'], type: \'value\', name: \'温度\', position: \'right\', offset: 50, splitNumber: 0, splitLine: { show: true, } }, 25 ] 26 option.series.push({ name: \'长度\', type: \'line\', stack: \'\', data: CrackValue, yAxisIndex: 0, symbol: \'none\' }) 27 option.series.push({ name: \'角度\', type: \'line\', stack: \'\', data: TiltAngle, yAxisIndex: 1, symbol: \'none\' }) 28 option.series.push({ name: \'温度\', type: \'line\', stack: \'\', data: Temperature, yAxisIndex: 2, symbol: \'none\' }) 29 option.tooltip = { 30 trigger: \'axis\' 31 32 }; 33 var myChart = echarts.init(document.getElementById(\'main\')); 34 myChart.setOption(option); 35 36 } 37 38 39 </script>
三、测试使用
在官网->实例里面编辑数据参数,查看网页效果
//折线图:
1 var nameDevice = \'设备\', 2 barName = \'水位\', 3 X = [\'周一\',\'周二\',\'周三\',\'周四\',\'周五\',\'周六\',\'周日\'], 4 dataValue = [820, 932, 901, 934, 1290, 1330, 1320]; 5 6 option = { 7 title: { 8 text: nameDevice, 9 subtext: barName, 10 x: \'center\', 11 y: \'top\' 12 }, 13 tooltip: { 14 trigger: \'axis\', 15 axisPointer: { 16 type: \'cross\', 17 label: { 18 backgroundColor: \'#6a7985\' 19 } 20 } 21 }, 22 legend: { 23 data: [barName], 24 x: \'left\', 25 y: \'top\' 26 }, 27 toolbox: { 28 feature: { 29 saveAsImage: {} 30 } 31 }, 32 calculable: true, 33 34 35 xAxis: { 36 type: \'category\', 37 boundaryGap: false, 38 data: X 39 }, 40 yAxis: { 41 type: \'value\' 42 }, 43 series: [{ 44 name: barName, 45 type: \'line\', 46 data: dataValue, 47 areaStyle: { 48 normal: { 49 color: { 50 type: \'linear\', 51 x: 0, 52 y: 0, 53 x2: 0, 54 y2: 1, 55 colorStops: [{ 56 offset: 0, 57 color: \'rgba(88,160,253,1)\' 58 }, { 59 offset: 0.5, 60 color: \'rgba(88,160,253,0.7)\' 61 }, { 62 offset: 1, 63 color: \'rgba(88,160,253,0)\' 64 }] 65 } 66 } 67 }, 68 lineStyle: { 69 normal: { 70 color: \'rgba(88,160,253,1)\' 71 } 72 }, 73 itemStyle: { 74 normal: { 75 color: \'rgba(88,160,253,1)\' 76 } 77 } 78 }] 79 };
1 var nameDevice = \'设备\', 2 barName = \'水位\', 3 X = [\'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\', \'周日\'], 4 dataValue = [820, 932, 901, 934, 1290, 1330, 1320]; 5 6 option = { 7 title: { 8 text: \'折线图堆叠\' 9 }, 10 tooltip: { 11 trigger: \'axis\' 12 }, 13 legend: { 14 data: [\'邮件营销\', barName, \'视频广告\', \'直接访问\', \'搜索引擎\'] 15 }, 16 grid: { 17 left: \'3%\', 18 right: \'4%\', 19 bottom: \'3%\', 20 containLabel: true 21 }, 22 toolbox: { 23 feature: { 24 saveAsImage: {} 25 } 26 }, 27 xAxis: { 28 type: \'category\', 29 boundaryGap: false, 30 data: [\'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\', \'周日\'] 31 }, 32 yAxis: { 33 type: \'value\' 34 }, 35 series: [{ 36 name: \'邮件营销\', 37 type: \'line\', 38 stack: \'总量\', 39 data: [120, 132, 101, 134, 90, 230, 210] 40 }, 41 { 42 name: barName, 43 type: \'line\', 44 stack: \'总量\', 45 data: dataValue, 46 areaStyle: { 47 normal: { 48 color: { 49 type: \'linear\', 50 x: 0, 51 y: 0, 52 x2: 0, 53 y2: 1, 54 colorStops: [{ 55 offset: 0, 56 color: \'rgba(88,160,253,1)\' 57 }, { 58 offset: 0.5, 59 color: \'rgba(88,160,253,0.7)\' 60 }, { 61 offset: 1, 62 color: \'rgba(88,160,253,0)\' 63 }] 64 } 65 } 66 }, 67 lineStyle: { 68 normal: { 69 color: \'rgba(88,160,253,1)\' 70 } 71 }, 72 itemStyle: { 73 normal: { 74 color: \'rgba(88,160,253,1)\' 75 } 76 } 77 }, 78 { 79 name: \'视频广告\', 80 type: \'line\', 81 stack: \'总量\', 82 data: [150, 232, 201, 154, 190, 330, 410] 83 }, 84 { 85 name: \'直接访问\', 86 type: \'line\', 87 stack: \'总量\', 88 data: [320, 332, 301, 334, 390, 330, 320] 89 }, 90 { 91 name: \'搜索引擎\', 92 type: \'line\', 93 stack: \'总量\', 94 data: [820, 932, 901, 934, 1290, 1330, 1320] 95 } 96 ] 97 };
//添加bar:柱状图
1 app.title = \'多 Y 轴示例\'; 2 var colors = [\'#5793f3\', \'#d14a61\', \'#675bba\']; 3 // 指定图表的配置项和数据 4 var nameDevice = \'设备\', barName = \'水位\', X = [\'Mon\', \'Tue\', \'Wed\', \'Thu\', \'Fri\', \'Sat\', \'Sun\'], 5 dataValue = [820, 932, 901, 934, 1290, 1330, 1320]; 6 var yMax = 1320; 7 var xMax = 6; 8 var yMin = 820; 9 var xMin = 0; 10 option = { 11 color: colors, 12 13 tooltip: { 14 trigger: \'axis\', 15 axisPointer: { 16 type: \'cross\' 17 } 18 }, 19 grid: { 20 right: \'20%\' 21 }, 22 toolbox: { 23 feature: { 24 dataView: {show: true, readOnly: false}, 25 restore: {show: true}, 26 saveAsImage: {show: true} 27 } 28 }, 29 legend: { 30 data:[\'蒸发量\',\'降水量\',\'平均温度\'] 31 }, 32 xAxis: [ 33 { 34 type: \'category\', 35 axisTick: { 36 alignWithLabel: true 37 }, 38 data: [\'1月\',\'2月\',\'3月\',\'4月\',\'5月\',\'6月\',\'7月\' ] 39 } 40 ], 41 yAxis: [ 42 { 43 type: \'value\', 44 name: \'蒸发量\', 45 min: 0, 46 max: 250, 47 position: \'right\', 48 axisLine: { 49 lineStyle: { 50 color: colors[0] 51 } 52 }, 53 axisLabel: { 54 formatter: \'{value} ml\' 55 } 56 }, 57 { 58 type: \'value\', 59 name: barName, 60 min: 0, 61 max: 250, 62 position: \'right\', 63 offset: 80, 64 axisLine: { 65 lineStyle: { 66 color: colors[1] 67 } 68 }, 69 axisLabel: { 70 formatter: \'{value} ml\' 71 } 72 }, 73 { 74 type: \'value\', 75 name: \'温度\', 76 min: 0, 77 max: 25, 78 position: \'left\', 79 axisLine: { 80 lineStyle: { 81 color: colors[2] 82 } 83 }, 84 axisLabel: { 85 formatter: \'{value} °C\' 86 } 87 } 88 ], 89 series: [ 90 { 91 name:\'蒸发量\', 92 type:\'line\', 93 data:[2.0, 4.9, 17.0, 23.2, 25.6, 76.7, 135.6 ] 94 }, 95 96 97 { 98 name: barName,以上是关于JS插件:ECharts-数据图表化的主要内容,如果未能解决你的问题,请参考以下文章