在vue脚手架中使用ECharts
程序员文章站
2022-03-22 09:47:45
1. npm安装ECharts在终端命令行中输入如下命令:npm install echarts --save2. 在main.js中全局引入ECharts// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts3.在eCharts.vue中...
1. npm安装ECharts
在终端命令行中输入如下命令:
npm install echarts --save
2. 在main.js中全局引入ECharts
// 引入ECharts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.在eCharts.vue中
<div id="myChart" :style="{ width: '500px', height: '500px' }"></div>
<script>
export default {
name: "eCharts",
data() {
return {};
},
mounted() {
//模板挂载完成后调用
this.drawEcharts();
},
methods: {
drawEcharts() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
})
}
}
}
</script>
这样你的第一个图表就诞生了!
更多详情可查看ECharts官网: https://echarts.apache.org/zh/index.html
本文地址:https://blog.csdn.net/qq_44271127/article/details/109621263
推荐阅读
-
在ASP.NET 2.0中操作数据之五十六:使用ObjectDataSource缓存数据
-
Vue使用watch监听一个对象中的属性的实现方法
-
Python中在for循环中嵌套使用if和else语句的技巧
-
在C#中如何使用Dapper详解(译)
-
在C#中 webbrowser的使用心得
-
在PYQT5中QscrollArea(滚动条)的使用方法
-
在ASP.NET 2.0中操作数据之六十七:在TableAdapters中使用JOINs
-
在ASP.NET 2.0中操作数据之六十六:在TableAdapters中使用现有的存储过程
-
关于C# 5.0 CallerMemberName CallerFilePath CallerLineNumber 在.NET4中的使用介绍方法
-
HTML5中微数据概述及在搜索引擎中的使用举例