在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)',
},
