vue中使用echarts

杨秉祺

已于 2023-01-10 16:21:26 修改

阅读量254

点赞数

文章标签： vue.js echarts javascript

于 2022-11-10 14:23:03 首次发布

本文链接：https://blog.youkuaiyun.com/YBQyyds/article/details/127788002

版权

先下载echarts cnpm install echarts

1.一下这段是规定画布的大小

<template>
    <div id="main" style="width:50%;height:376px"></div>
</template>

2.注意mounted内的函数方法名要与methods中的函数名字要一致

import * as echarts from "echarts";
export default {
    mounted(){
    	this.drawChart()  
    },
}

3.建立methods:在其中内嵌drawChart()

methods: {
      drawChart() {
      	 var chartDom = document.getElementById('main');
         var myChart = echarts.init(chartDom);
         var option;
      	{此处为代码粘贴处}
      
    option && myChart.setOption(option);
}
}

此处是echarts的官网