在Vue2.x的项目中使用echarts实现如下效果
安装echarts
npm install echarts --save
组件引入echarts
// 在你的Vue组件中
import * as echarts from 'echarts';
在模板中添加一个div元素，用来放置图表
<divref="chart"class="chart"style="width: 100%; height: 200px; color: white; margin-left: -10px; margin-top: -20px"></div>
对echarts图标进行设置
import { ref, onMounted } from 'vue';const chart = ref();onMounted(() => {// 初始化 ECharts 实例const myChart = echarts.init(chart.value);// 配置项const option = {title: {text: '单位：分钟', // 主标题（单位）left: '5%', // 靠左对齐top: '15%', // 靠顶部对齐textStyle: {fontSize: 6, // 字体大小color: '#fff', // 字体颜色},},tooltip: {trigger: 'axis',},xAxis: {type: 'category',data: ['3月7日', '3月8日', '3月9日', '3月10日', '3月11日', '3月12日', '3月13日'],axisLabel: {color: '#ffffff',fontSize: 5,},axisLine: {show: true,lineStyle: {color: '#022241', // X 轴轴线颜色width: 0.8,},},},yAxis: {type: 'value',min: 0, // 最小值max: 6, // 最大值interval: 2, // 刻度间隔axisLabel: {// 设置Y轴文字颜色color: '#ffffff',fontSize: 5,},splitLine: {show: false, // 隐藏 Y 轴的网格线},},series: [{data: [2, 3, 4, 3, 2, 5, 2],type: 'line',smooth: true, // 开启平滑曲线label: {show: false,},areaStyle: {color: 'rgba(34, 92, 214, 0.3)', // 设置填充区域的颜色（半透明蓝色）},},],};// 设置配置项myChart.setOption(option);// 监听窗口大小变化，动态调整图表大小window.addEventListener('resize', () => {myChart.resize();});
});
设置单位
设置单位的文字，字体颜色大小等
title: {text: '单位：分钟', // 主标题（单位）left: '5%', // 靠左对齐top: '15%', // 靠顶部对齐textStyle: {fontSize: 6, // 字体大小color: '#fff', // 字体颜色},},
设置X轴的文字大小和颜色
axisLabel: {color: '#ffffff',fontSize: 5,},
设置X轴的轴线的颜色
axisLine: {show: true,lineStyle: {color: '#022241', // X 轴轴线颜色width: 0.8,},},
指定Y轴的刻度
type: 'value',min: 0, // 最小值max: 6, // 最大值interval: 2, // 刻度间隔
设置Y轴边上文字的大小和颜色
axisLabel: {// 设置Y轴文字颜色color: '#ffffff',fontSize: 5,},
隐藏 Y 轴的网格线
splitLine: {show: false, // 隐藏 Y 轴的网格线},
设置图表实体内容的样式
// 开启平滑曲线
smooth: true,
label: {//隐藏y轴轴线show: false,
},
areaStyle: {
// 设置填充区域的颜色（半透明蓝色）color: 'rgba(34, 92, 214, 0.3)',
},
