vue2使用vue-echarts

1.先安装echarts   npm i echarts

2.安装vue-echarts

安装的时候注意下对应的版本

"echarts": "5.5.0", "vue-echarts": "6.7.3",这是我安装的版本

注意事项：

如果安装之后报错："export 'watchEffect' (imported as 'o') was not found in 'vue-demi'之类的，可能是vue的版本太低了在2.7以下

那么则需要安装依赖npm install @vue/composition-api

再在main.js中引入并注册

import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

再就是vue-echarts的使用示例

<template><v-chart :option="computedOption" autoresize :style="{ height: chartHeight, width: '100%' }" />
</template>  <script>
import VChart, { THEME_KEY } from 'vue-echarts'
import { use } from 'echarts/core'
import 'echarts/lib/component/grid'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'// 注册 ECharts 组件
use([TitleComponent, TooltipComponent, LegendComponent, PieChart, BarChart, LineChart, CanvasRenderer])export default {name: '', // 添加组件名称components: {VChart,},props: {chartHeight: {type: String,default: '100%',},// 图表数据chartData: {type: Array,required: false,default: () => [],},seriesData: {type: Array,required: false,default: () => [],},xData: {type: Array,default: () => [],},},computed: {computedOption() {return this.generateOption(this.chartData, this.seriesData)},},methods: {generateOption(dataList, seriesData) {const legendData = this.seriesData.map((item) => item.name)const dataTime = ['2023-12','2024-01','2024-02','2024-03','2024-04','2024-05','2024-06','2024-07','2024-08','2024-09','2024-10','2024-11','2024-12',]// 生成 series 数据const series = seriesData.map((item) => ({name: item.name,type: 'line',tooltip: item.tooltip,data: item.data,symbol: 'none',smooth:true,showSymbol: false,lineStyle: {width: 1.5}}))const option = {backgroundColor: '#ffffff', // 设置背景颜色为白色grid: {top: '10%', // 顶部内边距left: '10%', // 左侧内边距right: '10%', // 右侧内边距bottom: '30%', // 底部内边距},tooltip: {trigger: 'axis',// axisPointer: {//   type: "cross",//   crossStyle: {// 	color: "#999",//   },// },},legend: {data: legendData,orient: 'horizontal', //bottom: '2%', // 图例放在底部left:'10%',right:'10%',icon: 'rect',height:'25%', // type: 'scroll', // 超过宽度可滚动// pageIconColor: '#666', // 翻页按钮颜色// pageTextStyle: {//   color: '#666'// },itemGap: 15, // 图例项间隔lineHeight: 16,   // 行高itemWidth: 30, // 图例标记宽度itemHeight: 2, // 图例标记高度textStyle: {fontSize: 12,padding: [0, 0, 0, 5] // 调整文字与图例标记间距},// formatter: function (name) {//   // 限制图例文字长度//   return name.length > 6 ? name.substring(0, 6) + '...' : name;// }},xAxis: [{type: 'category',data: this.xData,axisPointer: {type: 'shadow',},axisTick: {show: false,},lineStyle: {type: 'dashed', // 设置为虚线color: '#ccc', // 虚线颜色},splitLine: {show: true,lineStyle: {type: 'dashed', // 设置为虚线color: '#ccc', // 虚线颜色},},},],yAxis: [{type: 'value',name: '',min: 0,axisLabel: {formatter: '{value} ',},axisLine: {show: true,},lineStyle: {type: 'dashed', // 设置为虚线color: '#ccc', // 虚线颜色width: 1},splitLine: {show: true,lineStyle: {type: 'dashed',color: '#ccc',width: 0.5,},},},{type: 'value',name: '',min: 0,axisLabel: {formatter: '{value} ',show: false, // 隐藏右侧的 Y 轴标签},splitLine: {show: true,lineStyle: {type: 'dashed',color: '#ccc',},},},],series: series,}return option},},
}
</script>  <style scoped>
.chart-container {width: 100%;
}
</style>