数据可视化案例

夢里婲

为 Echarts 创建一个具备高宽的DOM容器

1. <div :id="'myChart' + idkey " :style="{width: '300px', height: '200px'}"></div>

复制代码

id必须唯一，这样设置由于项目中有多个图表 单一的图表可以自己随便设置
准备好初始化的内容 设置 Echarts 样式

1. option: {
   
2.       // 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
   
3.         xAxis: {
   
4.           data: this.charttimes,// 类目数据
   
5.           show: false,// 是否显示 x 轴
   
6.           // 坐标轴刻度标签的相关设置
   
7.           axisLabel: {
   
8.             // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
   
9.             formatter: function (value, idx) {// 函数参数分别为刻度数值（类目），刻度的索引
   
10.               let newDate = new Date(Number(value))
    
11.               return [newDate.getMonth() + 1, newDate.getDate()].join('/')
    
12.             },
    
13.             interval: 500// 坐标轴刻度标签的显示间隔，在类目轴中有效 设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
    
14.           },
    
15.           boundaryGap: ['10%', '10%']// 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
    
16.         },
    
17.         // 类似xAxis
    
18.         yAxis: {
    
19.           show: false,
    
20.           boundaryGap: ['30%', '30%']
    
21.         },
    
22.         series: {
    
23.           showSymbol: false,// 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
    
24.           hoverAnimation: false,// 是否开启 hover 在拐点标志上的提示动画效果
    
25.           data: this.chartusages,// 系列中的数据内容数组。数组项通常为具体的数据项
    
26.           type: 'line',// 图表类型
    
27.           lineStyle: {
    
28.             color: '#8C8C8C',
    
29.             width: 1
    
30.           }
    
31.         },
    
32.         // 提示框组件
    
33.         tooltip: {
    
34.           trigger: 'axis',// 触发类型 坐标轴触发
    
35.           formatter: function (datas) {// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
    
36.             let newDate = new Date(Number(datas[0].name))
    
37.             let dateFormatter = date2str(newDate, 'YYYY-MM-DD HH:mm:ss')
    
38.             return dateFormatter + '</br>' + datas[0].value + '%'
    
39.           },
    
40.           // 坐标轴指示器配置项
    
41.           axisPointer: {
    
42.             lineStyle: {
    
43.               color: '#3752ff'
    
44.             },
    
45.             shadowStyle: {
    
46.               color: '#3752ff'
    
47.             }
    
48.           }
    
49.         }
    
50.       }

复制代码

一些项目中用到的配置都在上面 也有一些详细的解释 这里再提一下 提示框是指当鼠标移到数据部分会有一个框详细展示该点的信息 那么指示器就是一条线 上面配置就是一个颜色差不多深蓝色 平行于y轴的直线 随着鼠标的移动跟着动

画图

1. drawEChart () {
   
2.       获取DOM容器
   
3.       let myChart = echarts.init(document.getElementById(`myChart${this.idkey}`))
   
4.       this.option.xAxis.data = this.charttimes// 设置x轴数据 也就是说x轴应该显示啥 这就写啥
   
5.       this.option.series.data = this.chartusages // 设置图的数据 没数据拿啥画？
   
6.       myChart.setOption(this.option)// 画图
   
7.     }

复制代码

案例二

创建容器
....这个代码就不写了
准备配置

1. // 组件封装 数据传过来的 遍历一下 懒得改 凑合看
   
2. let series = this.ydata.map((data, idx) => ({
   
3.       name: this.names[idx],//系列名称
   
4.       data: data,//数据
   
5.       type: 'line',
   
6.       symbol: 'circle',
   
7.       showSymbol: false,
   
8.       /** 控制某点变色点时候不要直接设置颜色 */
   
9.       lineStyle: this.visualMap ? {} : {
   
10.         color: this.colors[idx]
    
11.       },
    
12.       itemStyle: {
    
13.         color: this.colors[idx],
    
14.         borderColor: this.colors[idx]
    
15.       },
    
16.       ...(this.area ? { areaStyle: typeof this.area === 'object' ? this.area : {
    
17.         color: new LinearGradient(0, 0, 0, 1, [{
    
18.           offset: 0,
    
19.           color: '#65BDF6'
    
20.         }, {
    
21.           offset: 1,
    
22.           color: this.colors[idx]
    
23.         }])
    
24.       }} : {})
    
25.     }))
    
26.     let that = this
    
27.     /** 控制某些点变颜色 */
    
28.     // visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）
    
29.     let visualMap = {
    
30.       type: 'piecewise',// 定义为分段型
    
31.       show: false,
    
32.       dimension: 0,
    
33.       pieces: this.pieces
    
34.     }
    
35.     Object.assign(this, {
    
36.       line: {
    
37.         title: {
    
38.           text: this.title
    
39.         },
    
40.         visualMap: that.visualMap ? visualMap : { show: false },
    
41.         tooltip: {
    
42.           trigger: 'axis',
    
43.           // textStyle: {
    
44.           //   color: '#0068FF'
    
45.           // },
    
46.           formatter: function (param) {
    
47.             return `${msec2str(Number(param[0].name), 'YYYY-MM-DD HH:mm:ss')}<br/>${param[0].value}`
    
48.           }
    
49.         },
    
50.         legend: {
    
51.           data: this.names
    
52.         },
    
53.         // 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴
    
54.         grid: {
    
55.           top: 40,
    
56.           bottom: 10,
    
57.           right: 25,
    
58.           left: 10,
    
59.           containLabel: true
    
60.         },
    
61.         xAxis: {
    
62.           data: this.xdata,
    
63.           type: 'category',
    
64.           axisTick: {
    
65.             alignWithLabel: true
    
66.           },
    
67.           axisLabel: {
    
68.             interval: that.xinterval || 59,
    
69.             showMaxLabel: true,
    
70.             formatter: function (value, idx) {
    
71.               // return idx === 0 ? msec2str(Number(value), 'YYYY-MM-DD') : msec2str(Number(value), 'MM-DD HH:mm')
    
72.               return msec2str(Number(value), that.xformatter || 'HH:00')
    
73.             }
    
74.           }
    
75.         },
    
76.         yAxis: {
    
77.           type: 'value'
    
78.         },
    
79.         series: series
    
80.       }
    
81.     })
    
82.     return {}

复制代码

画图也就不用我多说 （其实是我懒）

Dygraph

创建一个DOM容器（代码跟前面的基本类似）

1. <div class="chart"></div>

复制代码

准备好配置文件

1. plot () {
   
2.      // 有图就先删掉
   
3.       if (this.chart) {
   
4.         this.chart.destroy()
   
5.         this.chart = null
   
6.       }
   
7.       // 就是我们上面准备的容器
   
8.       this.chartEl.innerHTML = ''
   
9.       // 获取数据
   
10.       let data = await getData()
    
11.       if (data.values.length === 0) {
    
12.         this.chartEl.innerHTML = '<div class="chart-no-data">没有数据</div>'
    
13.         return
    
14.       }
    
15.       // 数据格式转换（不好意思 后端返的数据没法直接用 我先转换一下 各位看官可以跳过）
    
16.       let values = data.values.map(el => {
    
17.         let [a, b, c, , ...rest] = el
    
18.         return [a, b, c, ...rest]
    
19.       })
    
20.       let scoreValues = data.values.map(el => {
    
21.         // eslint-disable-next-line
    
22.         let [a, , , b, ...rest] = el
    
23.         return [a, b]
    
24.       })
    
25.       this.scoreValues = scoreValues
    
26.       // 上界和下界
    
27.       let lowers = []
    
28.       let uppers = []
    
29.       for (let v of values) {
    
30.         lowers.push([v[0], v[3]])
    
31.         uppers.push([v[0], v[4]])
    
32.         v[0] = msec2date(v[0])
    
33.         v[2] = v[2] ? v[1] : null
    
34.       }
    
35.       // tolerance update
    
36.       if (Object.keys(this.statistic).length > 0) {
    
37.         this.trimThreshold('upper', values, 4)
    
38.         this.trimThreshold('lower', values, 3)
    
39.         this.trimThreshold('upper', uppers, 1)
    
40.         this.trimThreshold('lower', lowers, 1)
    
41.       }
    
42.       // 样式指定
    
43.       let majorColor = '#136DFB'
    
44.       let minorColor = '#CCCCCC'
    
45.       let boundColor = '#408BFF'
    
46.       let anomalyColor = '#FF0000'
    
47.       let basebandColor = '#DCE9FE'
    
48.       let dylabels = [ 'x', '值', '异常' ]
    
49.       let series = {// 定义每系列选项。其键与y轴标签名称匹配，值是字典本身，包含特定于该系列的选项。
    
50.         '值': {
    
51.           color: majorColor,
    
52.           strokeWidth: 1,
    
53.           drawPoints: false
    
54.         },
    
55.         '异常': {
    
56.           color: anomalyColor,
    
57.           strokeWidth: 2,
    
58.           drawPoints: true,
    
59.           pointSize: 2,
    
60.           highlightCircleSize: 4
    
61.         },
    
62.         '分数': {
    
63.           color: majorColor,
    
64.           strokeWidth: 0,
    
65.           drawPoints: false,
    
66.           pointSize: 0,
    
67.           highlightCircleSize: 0
    
68.         }
    
69.       }
    
70.       dylabels = dylabels.concat([ '下界', '上界' ])
    
71.       series['上界'] = {
    
72.         color: boundColor,
    
73.         strokeWidth: 0,
    
74.         drawPoints: false,
    
75.         pointSize: 0,
    
76.         highlightCircleSize: 0
    
77.       }
    
78.       series['下界'] = {
    
79.         color: boundColor,
    
80.         strokeWidth: 0,
    
81.         drawPoints: false,
    
82.         pointSize: 0,
    
83.         highlightCircleSize: 0
    
84.       }
    
85. 
    
86.       // 是否填充
    
87.       if (this.filling) {
    
88.         let st = this.timerange.start
    
89.         if (dateLater(values[0][0], st)) {
    
90.           values.unshift([st, ...Array(values[0].length - 1).fill(null)])
    
91.         }
    
92.         let ed = this.timerange.end
    
93.         if (dateLater(ed, values[values.length - 1][0])) {
    
94.           values.push([ed, ...Array(values[0].length - 1).fill(null)])
    
95.         }
    
96.       }
    
97.       // 初始化dygraph
    
98.       this.chart = new Dygraph(this.chartEl, values, {
    
99.         labels: dylabels,//每个数据系列的名称，包括独立（X）系列
    
100.         connectSeparatedPoints: false,
     
101.         digitsAfterDecimal: 4,
     
102.         legend: 'follow',//何时显示图例。默认情况下，它仅在用户将鼠标悬停在图表上时显示
     
103.         interactionModel: Dygraph.defaultInteractionModel,
     
104.         labelsKMB: true,// 在y轴上显示千/千万/千亿的K / M / B.
     
105.         showRangeSelector: true,
     
106.         rangeSelectorHeight: 30,//范围选择器小部件的高度
     
107.         rangeSelectorPlotStrokeColor: majorColor,
     
108.         rangeSelectorPlotFillColor: minorColor,
     
109.         rangeSelectorPlotLineWidth: 1,
     
110.         rangeSelectorForegroundStrokeColor: minorColor,
     
111.         rangeSelectorForegroundLineWidth: 1,
     
112.         rangeSelectorBackgroundStrokeColor: minorColor,
     
113.         rangeSelectorBackgroundLineWidth: 1,
     
114.         axisLineColor: minorColor,
     
115.         gridLineColor: minorColor,
     
116.         series: series,
     
117.         axes: {//定义每轴选项
     
118.           x: {
     
119.             axisLabelFormatter: this.axisLabelFormatter
     
120.           },
     
121.           y: {
     
122.             axisLabelWidth: 35
     
123.           }
     
124.         },
     
125.         //设置后，每次用户通过鼠标悬停在图表外停止突出显示任何点时，都会调用此回调
     
126.         underlayCallback: (canvas, area, g) => {
     
127.           canvas.strokeStyle = basebandColor
     
128.           canvas.fillStyle = basebandColor
     
129.           let lowPoints = []
     
130.           let highPoints = []
     
131.           let drawBasebandBackgroundColor = () => {
     
132.             // 绘制基带 图中红色那一块
     
133.             // lowPoints对应下基带, hightPoints对应上基带
     
134.             // 至少有一边多于1个点才画: 才能画出线/区域
     
135.             if (lowPoints.length > 1 || highPoints.length > 1) {
     
136.               canvas.save()
     
137.               canvas.beginPath()
     
138.               if (lowPoints.length > 1) {
     
139.                 canvas.moveTo(...lowPoints[0])
     
140.                 // 从左到右
     
141.                 for (let i = 1; i < lowPoints.length; i++) {
     
142.                   canvas.lineTo(...lowPoints[i])
     
143.                 }
     
144.               }
     
145.               if (highPoints.length > 1) {
     
146.                 if (lowPoints.length > 1) {
     
147.                   canvas.lineTo(...highPoints[highPoints.length - 1])
     
148.                 } else {
     
149.                   canvas.moveTo(...highPoints[highPoints.length - 1])
     
150.                 }
     
151.                 // 从右到左
     
152.                 for (let i = highPoints.length - 2; i >= 0; i--) {
     
153.                   canvas.lineTo(...highPoints[i])
     
154.                 }
     
155.                 if (lowPoints.length > 1) {
     
156.                   canvas.lineTo(...lowPoints[0])
     
157.                 }
     
158.               }
     
159.               // 如果可以形成区域, 就填充
     
160.               if (lowPoints.length > 1 && highPoints.length > 1) {
     
161.                 canvas.closePath()
     
162.                 canvas.fill()
     
163.               }
     
164.               canvas.stroke()
     
165.               canvas.restore()
     
166.               lowPoints = []
     
167.               highPoints = []
     
168.             }
     
169.           }
     
170.           for (let j = 0; j < uppers.length; j++) {
     
171.             // 基带数据发生以下情况的变化, 就画出当前待绘制的这一段
     
172.             if (
     
173.               (lowPoints.length === highPoints.length && lowPoints.length > 0 && (lowers[j][1] === null || uppers[j][1] === null)) || // 2 -> 1/0
     
174.               (lowPoints.length > 0 && highPoints.length === 0 && lowers[j][1] === null) || // 1 -> 0
     
175.               (lowPoints.length === 0 && highPoints.length > 0 && uppers[j][1] === null) || // 1 -> 0
     
176.               (lowPoints.length > 0 && highPoints.length === 0 && lowers[j][1] !== null && uppers[j][1] !== null) || // 1 -> 2
     
177.               (lowPoints.length === 0 && highPoints.length > 0 && lowers[j][1] !== null && uppers[j][1] !== null) // 1 -> 2
     
178.             ) {
     
179.               drawBasebandBackgroundColor()
     
180.             }
     
181.             let xx = 0
     
182.             if (lowers[j][1] !== null) {
     
183.               let x = g.toDomXCoord(lowers[j][0])
     
184.               let y = g.toDomYCoord(lowers[j][1])
     
185.               lowPoints.push([x, y])
     
186.               xx = x
     
187.             }
     
188.             if (uppers[j][1] !== null) {
     
189.               let x = g.toDomXCoord(uppers[j][0])
     
190.               let y = g.toDomYCoord(uppers[j][1])
     
191.               highPoints.push([x, y])
     
192.               xx = x
     
193.             }
     
194.             if (xx >= area.x + area.w) {
     
195.               break
     
196.             }
     
197.           }
     
198.           drawBasebandBackgroundColor()
     
199.         }
     
200.       })
     
201.     }

复制代码

开始画图

1. this.chartEl = this.$el.getElementsByClassName('chart')[0]
   
2. this.plot()

复制代码