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

二、例子

实例：

JS插件：ECharts-数据图表化

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