需要展示某個(gè)月用戶在不同時(shí)間的充電次數(shù)統(tǒng)計(jì)
- 第一步芍阎，先安裝echarts
yarn add echarts
- 第二步燎斩，局部引入
// 因?yàn)槲沂侵挥幸粋€(gè)地方用到杯活，所以就局部引入了匆帚，要是全局引入在main.js中就可以了
// index.vue
import echarts from 'echarts'
- 創(chuàng)建div,js繪制
<div ref="mychart" class="mychart"></div>
// js部分
const myChart = echarts.init(this.$refs.mychart) // 先獲得這個(gè)dom元素并初始化
const xAxisData = this.monthBill.distributedData.map(
item => item.time + ':00'
) // 橫坐標(biāo)數(shù)據(jù)
const seriesData = this.monthBill.distributedData.map(item => item.count) //折線數(shù)據(jù)
// 拆線數(shù)據(jù)的lenth和橫坐標(biāo)要對(duì)應(yīng)
xAxis: {
type: 'category',
data: xAxisData,
boundaryGap: false,
// axisLabel設(shè)置x軸的小標(biāo)
axisLabel: {
show: true,
interval: 4, // 坐標(biāo)中間間隔的數(shù)值
color: '#999999',
fontSize: '16px'
},
// axisLine 設(shè)置x軸的軸線
axisLine: {
lineStyle: {
color: '#999'
}
},
// 設(shè)置提示框
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
triggerOn: 'mousemove',
backgroundColor: '#E31937',
formatter: '{c}次',
// 設(shè)置折線點(diǎn)提示框位置
position: function (point, params, dom, rect, size) {
return [point[0] - 16, point[1] - 38]
}
},
series: [
{
type: 'line',
// 拐點(diǎn)設(shè)置
itemStyle: {
borderWidth: 1,
borderColor: '#E31937',
color: '#EC6A7E'
},
// 拐點(diǎn)類型，空心圓還是實(shí)心圓
symbol: 'circle',
lineStyle: {
color: '#E31937'
},
data: seriesData
}
]
}
