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 };
View Code
 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 };
View Code

 //添加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-数据图表化的主要内容，如果未能解决你的问题，请参考以下文章
 

 图表插件dygraphs.js插件使用


 echarts.js一个页面如何加载多个图表？


 Vue使用vue-echarts图表


 专门做图表数据显示的js插件


 Echarts.js简介


 数据图表插件Echarts