1.本地安装echarts
npm install echarts --save
2.本地安装vue-echarts
npm install vue-echarts --save
3.本地安装vue-echarts
包装成组件,引用
import chart from "vue-echarts";
4.父组件代码
<template>
<div class="hello">
<chart></chart>
</div>
</template>
<script>
import chart from "./chart";
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App",
};
},
components: {
chart
},
mounted() {
// this.treeAmount();
},
methods: {
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
5.子组件代码
<template>
<div>
<chart :options="options"></chart>
</div>
</template>
<script>
import chart from "vue-echarts";
import "echarts/lib/chart/bar";
export default {
data() {
return {};
},
components: {
chart
},
computed: {
options() {
return {
title: {
text: "ECharts 入门示例"
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
};
}
},
mounted() {},
methods: {}
};
</script>
<style scoped>
</style>