在Vue-CLI中使用ECharts_全局引入
1. 在vue-cli项目中安装EChartsnpm install echarts --save2. List item在main.js中引入ECharts,并挂载到vue的prototype上import echarts from "echarts"Vue.prototype.$echarts = echarts3.在vue页面中使用
·
1. 在vue-cli项目中安装ECharts
npm install echarts --save
项目文件package.json
{
"name": "echarts_1",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"echarts": "^4.9.0",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"vue-template-compiler": "^2.6.11"
}
}
2. List item在main.js中引入ECharts,并挂载到vue的prototype上
import echarts from "echarts"
Vue.prototype.$echarts = echarts
3. 在vue页面中使用
<template>
<div class="hello">
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px; height: 400px"></div>
</div>
</template>
<script>
export default {
mounted() {
this.myChartInit();
},
methods: {
myChartInit() {
// 基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
justify-content: center;
align-items: center;
display: -webkit-flex;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)