echarts和vue没有关系,所以不需要在main里面Vue.use()
是独立的空白画布
yarn add echarts -S //默认最新版本
1.引入
import * as echarts from 'echarts'; //这里是echarts5的引入方式
* as ecgarts(别名)//* as 是给别名 *表示乘法的意思
2.在mounted中写入(因为要等待DOM节点加载完成后再加载)
mounted(){
// 基于准备好的dom,初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210522152931309.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA0MDg2Nw==,size_16,color_FFFFFF,t_70#pic_center)
echarts5在vue中的使用
最新推荐文章于 2023-07-04 01:33:03 发布