以下是一个简单的Vue和
Echarts的
案例，展示如何在Vue项目中使用
Echarts绘制图表。
首先，安装
echarts和vue-
echarts插件：
```bash
npm install
echarts vue-
echarts
```
在Vue组件中，引入
echarts和vue-
echarts，并注册组件：
```vue
<template>
<div>
<vue-
echarts :options="chartOptions" ref="chart"></vue-
echarts>
</div>
</template>
<script>
import
echarts from '
echarts'
import Vue
ECharts from 'vue-
echarts'
export default {
components: {
Vue
ECharts
},
data() {
return {
chartOptions: {
//
Echarts配置项
// ...
}
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
const chart = this.$refs.chart
const
echartsInstance = chart.
echarts
// 使用
echartsInstance对象进行图表初始化和配置
// ...
// 示例：绘制柱状图
echartsInstance.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
})
}
}
}
</script>
```
这个
案例中，我们在Vue组件中引入了
echarts和vue-
echarts，并在mounted钩子函数中调用initChart方法来初始化和绘制图表。在initChart方法中，我们通过this.$refs.chart.
echarts获取到
echarts实例，然后使用
echarts实例对象进行图表的配置和绘制。
1943
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
