需要展示某个月用户在不同时间的充电次数统计
- 第一步，先安装echarts
yarn add echarts
- 第二步，局部引入
// 因为我是只有一个地方用到，所以就局部引入了，要是全局引入在main.js中就可以了
// index.vue
import echarts from 'echarts'
- 创建div,js绘制
<div ref="mychart" class="mychart"></div>
// js部分
const myChart = echarts.init(this.$refs.mychart) // 先获得这个dom元素并初始化
const xAxisData = this.monthBill.distributedData.map(
item => item.time + ':00'
) // 横坐标数据
const seriesData = this.monthBill.distributedData.map(item => item.count) //折线数据
// 拆线数据的lenth和横坐标要对应
xAxis: {
type: 'category',
data: xAxisData,
boundaryGap: false,
// axisLabel设置x轴的小标
axisLabel: {
show: true,
interval: 4, // 坐标中间间隔的数值
color: '#999999',
fontSize: '16px'
},
// axisLine 设置x轴的轴线
axisLine: {
lineStyle: {
color: '#999'
}
},
// 设置提示框
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
triggerOn: 'mousemove',
backgroundColor: '#E31937',
formatter: '{c}次',
// 设置折线点提示框位置
position: function (point, params, dom, rect, size) {
return [point[0] - 16, point[1] - 38]
}
},
series: [
{
type: 'line',
// 拐点设置
itemStyle: {
borderWidth: 1,
borderColor: '#E31937',
color: '#EC6A7E'
},
// 拐点类型，空心圆还是实心圆
symbol: 'circle',
lineStyle: {
color: '#E31937'
},
data: seriesData
}
]
}
