1. 首页
  2. 前端

ECharts图表-历史曲线

iweb • 2021年1月28日 am9:11 • 前端 • 阅读 65

 

ECharts图表-历史曲线

 

代码

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
//图表需要的数据【时间数组、时间所对应的数据数组】
historyTime = equipHistory.times;
historyValue = equipHistory.values;
 
this.hisChart = this.$echart.init(
    document.getElementById('historyData'),
    'light'
);
 
this.hisChart.setOption({
    grid: {
        left: '1%',
        top: '10%',
        right: '2%',
        bottom: '11%',
        containLabel: true,
        color: 'red'
    },
    tooltip: {
        style: {
            color: 'red'
        }
    },
    xAxis: {
        type: 'category',
        splitLine: {
            show: false,
            lineStyle: { // x网格线
                color: 'red'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#999fa8',
                width: 1 // 这里是为了突出显示加上的
            }
        },
        axisLabel: {
            margin: 12,
            textStyle: {
                color: '#d3d8e2',
                fontSize: '13'
            }
        },
        labels: {
            style: {
                color: '#d3d8e2'
            }
        },
        style: {
            color: '#d3d8e2'
        },
 
        data: historyTime
    },
    yAxis: {
        gridLineColor: '#3b4357',
        gridLineWidth: 1,
        type: 'value',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            margin: 12,
            textStyle: {
                color: '#d3d8e2',
                fontSize: '13'
            }
        },
        style: {
            color: '#d3d8e2',
            fontWeight: 'bold',
            fontSize: '12px',
            fontFamily: 'Trebuchet MS, Verdana, sans-serif'
        },
 
        title: {
            style: {
                color: '#d3d8e2',
                fontWeight: 'bold',
                fontSize: '12px',
                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
            }
        },
        labels: {
            style: {
                color: '#d3d8e2'
            }
        },
        splitLine: {
            show: true,
            lineStyle: { // x网格线
                color: '#373f51'
            }
        }
    },
    // 图表时间轴滑块
    dataZoom: [{
            height: 30,
            xAxisIndex: [0],
            start: 0,
            end: 10,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
                color: '#3b4357',
                shadowBlur: 3,
                shadowColor: '#3b4357',
                shadowOffsetX: 2,
                shadowOffsetY: 2,
                textStyle: {
                    color: '#d3d8e2'
                }
            },
            style: {
                color: '#d3d8e2'
            },
            borderColor: '240, 244, 255, 0.16',
            color: 'red',
            fontColor: 'red',
            textStyle: {
                color: '#d3d8e2'
            }
        },
        {
            type: 'inside',
            start: 0,
            end: 10,
            height: 15
        }
    ],
    series: [{
        data: historyValue,
        type: 'line',
        animation: false,
        // showSymbol :false,
        sampling: 'average', //降采样策略-明显优化拖动滚动条卡顿
        smooth: false
    }]
});

 

赞 (0)
iweb iweb
0
vue项目-npm模块化功能页面
« 上一篇 2021年1月21日 pm3:34
Highchart图表-实时曲线
下一篇 » 2021年1月28日 am10:13

相关推荐

联系我们

咨    询：点击这里给我发消息

邮    箱：cyt_web@163.com

小程序：AI前端