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>