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)
}