Vue3调用Apache Echarts

Apache Echarts"/>

Vue3调用Apache Echarts

先下载

npm install echarts

那个网页用就在那引入

import * as echarts from "echarts";

写代码

在template写一个div

<div ref="main" style="background:#eee; width: 1300px; height: 500px"></div>

在script 标签要带setup属性

//声明main的ref
const main = ref();
//
onMounted(() => {init()})function init () {var myChart = echarts.init(main.value);var option = {legend: {},tooltip: {},dataset: {
//dimensions: ['product', '套装门', '亮窗门', '套装门套'],source: [{ product: '周一', 套装门: 43.3, 亮窗门: 85.8, 套装门套: 93.7 },{ product: '周二', 套装门: 83.1, 亮窗门: 73.4, 套装门套: 55.1 },{ product: '周三', 套装门: 86.4, 亮窗门: 65.2, 套装门套: 82.5 },]},xAxis: { type: 'category' },yAxis: {},series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]}option && myChart.setOption(option);};

如果有更好的方法欢迎留言