Vue中使用echarts 5

2023-11-14  本文已影响0人  Frank_Fang

echarts升级到5.0+以后,vue-echarts会报一个错:
"import echarts from 'echarts/lib/echarts.js'" is not supported anymore. Use "import * as echarts from 'echarts/lib/echarts.js'" instead;

改成直接使用echarts就好了。

先安装:

npm i echarts -S

页面中使用

<div ref="echarts" style="width: 100%; height: 250px"></div>

页面中引入 echarts

import * as echarts from 'echarts'

使用

mounted () {
  // 初始化实例
  const myChart = echarts.init(this.$refs.echarts)

  // 绘制
  const option = option: {
      title: {
        text: "ECharts 柱状图",
      },
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    }
  myChart.setOption(option)
}
上一篇 下一篇

猜你喜欢

热点阅读