1、安装 , 控制台输入, 默认echarts 5版本
npm i echarts -S 或
npm install echarts --save
2、引入 main.js, 全局注册
import * as echarts from 'echarts'
const app = createApp(App);
app.config.globalProperties.$echarts = echarts //绑定实例
提示:初始化项目,main.js
createApp(App).mount('#app') 可修改为: const app = createApp(App);
3、项目中使用echarts
(1)初始化:
var myChart = this.$echarts.init(document.querySelector('.echart')) // .echart是放置图表的容器,可自定义,设置容器时一定要设置宽高,不设置会导致图表不显示走入误区。
(2)定义option,根据自己需求定义,可在echarts官方网站
Apache EChartshttps://echarts.apache.org/zh/index.html 上查找自己需要的实例
var option= {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 200, 210, 218, 135, 147, 245],
type: 'line'
}
]
}
(3)设置数据
myChart.setOption(option)
即可看到自己设置的图表