Vue使用官方Echarts5(v5)

Notes：

网上搜大多数vue echarts都是v4的，所以，直接CV不能运行

不能运行是因为什么呢？

原因就是:没看官方文档

官方文档如下：https://echarts.apache.org/zh/tutorial.html#ECharts%205%20%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97

所以，就差* as 四个字符

v5正确的使用方法是：

import * as echarts from 'echarts';
// 按需引入
import * as echarts from 'echarts/lib/echarts';

---

vue代码

main.js

import * as Echarts from 'echarts'
Vue.prototype.$echarts = Echarts

xxx.vue

<template>
  <div class="111">
    <div class="Echarts">
      <div id="main" style="width: 100%; height: 400px"></div>
     </div>
  </div>
</template>

<script>
import axios from "axios";
import dateFormat from '../utils/date-format'

export default {
  data() {
    return {
      myChart: {},
      option: {},
      oldata: {
        //status: 1,
        //type: "data",
        //x: [1612792000, 1612793802, 1612795599, 1612797399, 1612799199],
        //y: [120, 240, 280, 50, 100],
      }, //贾克斯返回的数据
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("main"));
    this.updateEcharts()
  },
  methods: {

    updateEcharts() {
      // 指定图表的配置项和数据
      this.option = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: this.oldata.x,
        },
        yAxis: {
          scale:true,
          minInterval: 1
        },
        series: [
          {
            name: "销量",
            type: "line",
            data: this.oldata.y,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(this.option);
    }
  },
};
</script>

---

再次Notes：

echarts不能拼错

rat不能用

标签：Vue,vue,myChart,Echarts5,v5,import,data,echarts,oldata
来源： https://blog.csdn.net/xuehu96/article/details/113869429