官網地址：Apache ECharts

?一、下載插件并在頁面中引入

? npm install echarts --save

頁面導入：

? import * as echarts from 'echarts'

全局導入：?main.js 中，導入并注冊到全局

? import echarts from 'echarts'
? Vue.prototype.$echarts = echarts

二、實現效果展示

三、繪制柱狀圖使用步驟

?代碼示例

<template><div class="chart"><divid="chart_one"style="height: 82%;padding: 10px;display: flex;align-items: center;justify-content: center;"></div><h2>近一周使用記錄</h2></div>
</template><script>import * as echarts from 'echarts'export default {mounted() {// 解決echarts圖表放大溢出父容器// 頁面上的元素進行監測和調整大小操作，當被監測的元素的大小發生變化時調用setTimeout(() => {const resizeOb = new ResizeObserver((entries) => {for (const entry of entries) {echarts.getInstanceByDom(entry.target).resize()}})resizeOb.observe(document.getElementById('chart_one')) })// 通過id獲取echarts元素初始化圖表的容器：創建一個 echarts 實例，調用 methods 里的 initChart 進行圖表初始化// 獲取id為chart_one的dom元素給chartDom容器，init初始化一個echarts實例給myChart，需以dom元素為參數this.$nextTick(() => {this.chartDom = document.getElementById('chart_one')this.myChart = echarts.init(this.chartDom)this.initChart() })// 接口獲取數據后，再為echarts賦值this.initData()setTimeout(() => {this.initChart() }, 2000)},methods: {initChart() {// 在 ECharts 的 X 軸上顯示當前日期前一周的月日const today = new Date()const lastWeek = new Date(today.getFullYear(),today.getMonth(),today.getDate() - 6) // 最近一周的日期const xAxisData = [] // 存儲要顯示的日期字符串for (let i = lastWeek.getTime(); i <= today.getTime(); i += 86400000) {const date = new Date(i)xAxisData.push(date.toLocaleDateString('en-US', {month: 'numeric',day: 'numeric',}))}this.option = {// 設置圖表的邊距，containLabel表示圖表內容應包含在邊距之內grid: {left: '3%',right: '4%',bottom: '4%',top: '11%',containLabel: true,},// 設置一個圖表的 x 軸屬性xAxis: {type: 'category',data: xAxisData, // x 軸上的數據axisLabel: {formatter: '{value}', // 顯示格式},},yAxis: {type: 'value',axisLabel: {formatter: '{value} m3',},},// 提示框的內容和樣式，tooltip: {trigger: 'axis', // 觸發方式formatter: '用氣日期：{b}<br />日用氣量：{c}', // 自定義數據backgroundColor: 'rgba(255, 255, 255, 0.8)',axisPointer: {type: 'shadow',},},// 圖表的配置series: [{// data: this.chartonedate, // 顯示數據data: [120, 200, 150, 80, 70, 110, 130],type: 'bar', // 圖表類型，柱狀showBackground: true, // 是否顯示柱狀圖背景色backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)',},label: {// 標簽的樣式normal: {show: true,position: 'top',},},},],}// 根據 this.option 的值來設置 this.myChart 的選項this.option && this.myChart.setOption(this.option)}, },}
</script>// 根據需要添加類名修改樣式
<style lang="scss" scoped>.chart {width: 95%;height: 92%;background: linear-gradient(to bottom, #ffffff, #ffffff);h2 {text-align: center;margin: 0;font-size: 18px;color: #000;}}
</style>

四、繪制折線圖、餅圖代碼整合

<template><el-row :gutter="6"> <el-col :span="9"><div class="ul-one ul-two"><div class="chart"><divid="chart_two"style="height: 82%;padding: 10px;display: flex;align-items: center;justify-content: center;"></div><h2>充值記錄</h2></div></div></el-col><el-col :span="6"><div class="ul-one ul-two"><div class="chart"><divid="chart_three"style="height: 82%;padding: 10px;display: flex;align-items: center;justify-content: center;"></div><h2>用戶數據分布</h2></div></div></el-col></el-row>
</template><script>import * as echarts from 'echarts'export default {mounted() { setTimeout(() => {const resizeOb = new ResizeObserver((entries) => {for (const entry of entries) {echarts.getInstanceByDom(entry.target).resize()}}) resizeOb.observe(document.getElementById('chart_two'))resizeOb.observe(document.getElementById('chart_three'))}) this.$nextTick(() => {this.chartDom = document.getElementById('chart_one')this.myChart = echarts.init(this.chartDom)this.initChart()this.chartDomtwo = document.getElementById('chart_two')this.myCharttwo = echarts.init(this.chartDomtwo)this.initCharttwo()this.chartDomthree = document.getElementById('chart_three')this.myChartthree = echarts.init(this.chartDomthree)this.initChartthree()}) this.initData()setTimeout(() => { this.initCharttwo()this.initChartthree()}, 2000)},methods: { initCharttwo() {this.optiontwo = {grid: {left: '3%',right: '4%',bottom: '4%',top: '11%',containLabel: true,},xAxis: {type: 'category',data: ['周期七','周期六','周期五','周期四','周期三','周期二','周期一',],},yAxis: {type: 'value',axisLabel: {formatter: '{value} m3',},},tooltip: {trigger: 'axis',formatter: '用氣周期：{b}<br />周期用量：{c}', // 自定義數據backgroundColor: 'rgba(255, 255, 255, 0.8)',axisPointer: {type: 'shadow',},},series: [{// data: this.charttwodate,data: [120, 200, 150, 80, 70, 110, 130],type: 'line',// 圖表上顯示數據，并放置在數據點的上方。label: {normal: {show: true,position: 'top',},},},],}this.optiontwo && this.myCharttwo.setOption(this.optiontwo)},initChartthree() {this.optionthree = {tooltip: {trigger: 'item',},legend: {orient: 'vertical',left: 'left',},// 控制頂部小圖標的位置legend: {top: '0',left: 'center',},series: [{name: '用戶數量',type: 'pie',radius: '50%',center: ['50%', '60%'],data: [{ value: 83, name: '燃氣表用戶' },{ value: 16, name: '流量計用戶' },{ value: 9, name: '未開戶用戶' },],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)',},},},],}this.optionthree && this.myChartthree.setOption(this.optionthree)},},}
</script><style lang="scss" scoped>.ul-two {display: flex;justify-content: space-around;margin: 5px 3px;border: 1px solid #ccc;li {margin: 10px;list-style: none;width: 15%;height: 200px;.ranqibiao {border-radius: 50px;width: 100%;height: 100%;background: url('~@/assets/bg/bg1.png') no-repeat center center;box-shadow: 0 4px 9px 2px rgba(247, 189, 35, 0.91);background-size: cover;display: flex;justify-content: center;}.liuliangji {border-radius: 50px;width: 100%;height: 100%;background: url('~@/assets/bg/bg2.png') no-repeat center center;box-shadow: 0 4px 9px 2px rgba(62, 170, 255, 0.91);background-size: cover;display: flex;justify-content: center;}.weikahu {border-radius: 50px;width: 100%;height: 100%;background: url('~@/assets/bg/bg3.png') no-repeat center center;box-shadow: 0 4px 9px 2px rgba(80, 224, 254, 0.91);background-size: cover;display: flex;justify-content: center;}.image {border-radius: 10px;background: #ffffff;width: 45px;height: 45px;display: flex;align-items: center;justify-content: center;margin-top: 40px;}.text {color: #ffffff;font-weight: bolder;margin-top: 20px;}.number {color: #ffffff;font-size: 20px;font-weight: 800;margin-top: 30px;}}}.val {text-align: center;color: #000;h2 {margin: 10px 0 0 0;}}.ul-one {height: 320px;display: flex;justify-content: center;align-items: center;}.chart {width: 95%;height: 92%;background: linear-gradient(to bottom, #ffffff, #ffffff);h2 {text-align: center;margin: 0;font-size: 18px;color: #000;}}
</style>