vue使用echarts

安装echarts：

npm install echarts --save

使用（echarts组件）：

<template>
  <div class="performanceTrend" :id="id"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    id: {
      type: String,
      default: 'performanceTrend'
    },
    data: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      myChart: null,
    };
  },
  watch: {
    data:{
        handler(newValue){
            this.$nextTick(function () {
                this.init();
            });
        },
        deep:true,
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const dom = document.getElementById(this.id)
      this.myChart = echarts.init(dom)
      this.initCharts()
    },

    initCharts() {
      let Xdata = []
      let Ydata = []
      this.data.forEach(element => {
        Xdata.push(element.time)
        Ydata.push(element.value)
      });
      // 生成趋势图
      let option = {
        // title: {
        //   text: "",
        // },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          // orient: 'vertical',
          icon: 'rect', // 设置图例的图形形状，circle为圆，rect为矩形
          // orient: 'horizontal',
          left: '1%',
          top: '1%',
          itemWidth: 3,
          itemHeight: 15,
          data: [this.$attrs.name],
          textStyle: {
            fontWeight: 'bold', // 添加这一行
          },
        },
        grid: {
          left: "2%",
          right: "6%",
          bottom: "10%",
          top: '20%',
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            // show: false, // 添加这一行
            lineStyle: {
              color: '#ddd' // 这里设置你想要的颜色，例如红色
            }
          },
          // 去除刻度
          axisTick: {
            show: false,
          },
          // 改字体颜色
          axisLabel: {
            color: '#999'
          },
          data: Xdata,
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false, // 添加这一行
          },
          // 改成虚线
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#ddd'
            }
          },
          axisLabel: {
            color: '#999'
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: this.$attrs.name,
            type: "line",
            stack: "总量",
            showSymbol: false,
            data: Ydata,
            // area模式
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(24, 144, 255, 0.4)'
              }, {
                offset: 0.8,
                color: 'rgba(24, 144, 255, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            },
            // 改变线的颜色
            itemStyle: {
              color: '#1890ff'
            },

          },
        ],
      };
      option && this.myChart.setOption(option);
    }
  },
};
</script>

<style scoped lang="scss">
.performanceTrend {
  width: 100%;
  height: 100%;
  // height: 190px;
}
</style>

使用组件：

<template>
    <div>
        <div class="item">
            <performanceTrendChart :id="'chart1'" :name="name" :data="list"  style="width: 600px;height: 250px;" />
        </div>
    </div>
</template>

<script>
import performanceTrendChart from './component/performanceTrendChart.vue'

export default {
    components: {
        performanceTrendChart
    },
    data() {
        return{
            name: '图表',
            list: [
                {
                    time: '2024-06-06',
                    value: 12
                },
                {
                    time: '2024-06-06',
                    value: 12
                },
                {
                    time: '2024-06-06',
                    value: 12
                },
            ]
        }
    }
}
</script>