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);};
如果有更好的方法欢迎留言
更多推荐
Vue3调用Apache Echarts
发布评论