使用vue3实现echarts图表。
首先我们需要下载并引入echarts
npm install echarts --save然后我们需要在我们项目中的main.js中配置我们的echarts
import { createApp } from 'vue' import App from './App.vue' import * as echarts from "echarts"; createApp(App).mount('#app') app.config.globalProperties.$echarts = echarts;
然后我们就可以开始绘制图像了，下述是绘制玫瑰图和面积图的案例。
echarts图表之玫瑰图
首先我们应该定义一个玫瑰图的容器，也就是在我们的template中
<div id="rose" :style="{ width: '400px', height: '400px' }"></div>
然后进行引入和配置
import { ref, onMounted } from 'vue' import * as echarts from 'echarts' const areaChart = ref(null)
其次我们可以开始定义图像的基本信息
const state = { option: { series: [ { type: 'pie', data: [ { value: 100, name: 'A' }, { value: 200, name: 'B' }, { value: 300, name: 'C' }, { value: 400, name: 'D' }, { value: 500, name: 'E' } ], roseType: 'area' } ] } }
最后我们在onMounted中挂载
onMounted(() => { roseChart.value = echarts.init(document.getElementById('rose')) roseChart.value.setOption(state.option) })
然后就可以实现了
echarts图表之面积图
首先我们应该定义一个玫瑰图的容器，也就是在我们的template中
<div id="area" :style="{ width: '400px', height: '400px' }"></div>
然后进行引入和配置
import { ref, onMounted } from 'vue' import * as echarts from 'echarts' const roseChart = ref(null)
其次我们可以开始定义图像的基本信息
const area = { option: { xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [ { data: [10, 22, 28, 23, 19], type: 'line', areaStyle: {} }, { data: [25, 14, 23, 35, 10], type: 'line', areaStyle: { color: '#ff0', opacity: 0.5 } } ] } }
最后我们在onMounted中挂载
onMounted(() => { areaChart.value = echarts.init(document.getElementById('area')) areaChart.value.setOption(area.option) })
然后就可以实现了
到这里也就结束了，希望对您有所帮助。
