如何在vue项目中引入echarts
问题:我在vue项目中使用npm install echarts --save下载echarts时,然后导入的时候发现一致提示如下错误:后来在网上找发现时版本问题,当我使用上述命令下载时,下载的echarts版本时5.0的后来我参考该博主的方法:https://blog.csdn.net/weixin_44874618/article/details/110647652重新安装就可一正常使用的效果
·
问题:
我在vue项目中使用npm install echarts --save下载echarts时,然后导入的时候发现一致提示如下错误:
后来在网上找发现时版本问题,当我使用上述命令下载时,下载的echarts版本时5.0的
后来我参考该博主的方法:https://blog.csdn.net/weixin_44874618/article/details/110647652
重新安装就可一正常使用的
效果如下:
具体代码如下:
1.在main.js中全局引入
2.随便创建一个要显示echarts图的vue文件
<template>
<div>
list
<div ref="myechart" style="width: 600px; height: 400px"></div>
</div>
</template>
<script>
export default {
mounted() {
this.setChart()
},
methods: {
setChart() {
var myChart = this.$echarts.init(this.$refs.myechart)
// 指定图表的配置项和数据
var option = {
title: {
text: "ECharts 入门示例",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
},
},
}
</script>
<style lang="" scoped>
</style>
更多推荐
已为社区贡献13条内容
所有评论(0)