【VUE】vue中使用echarts 5

vue中使用echarts 5版本

1. 先下载echarts5

npm i echarts --save

2. 在mian.js中按需导入

// 引入echarts核心模块
import * as from echarts from "echarts/core"
// 引入图表
import { BarChart } from "echarts/charts"
// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components"
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
// 注册组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  PieChart,
  CanvasRenderer,
])
// 将echarts挂载到Vue原型上
Vue.propotype.$echarts=echarts;

3. 在页面中新建一个div，必须设置宽高

<div ref="barChart" style="width:500px;height:300px;"></div>

4. 在mounted生命周期函数中写如下代码

export default {
  mounted() {
    // 注意：一定要在mounted中调用
    this.drawChart();
  },
  methods: {
    drawChart() {
      let echart = this.$echarts.init(this.$refs.barEchart);
      echart.setOption({
        title: {
          text: "柱状图",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
  },
};

5. 效果