成功vue使用柱状图
先安装：npm install echarts --save
<template>
<div>
<div ref="Mychart"></div>
</div>
</template>
<script>
// import echarts from "echarts";
export default {
name: "max",
data() {
return {
chart: null,
option: {
title: {
text: "手机销售量",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: ["一月", "二月", "三月", "四月", "五月", "六月"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [300, 200, 360, 410, 520, 610],
},
],
color: ["#66FF99"],
},
};
},
mounted() {
this.getPage();
},
methods: {
getPage() {
var echarts = require("echarts");
let chart = echarts.init(this.$refs.Mychart);
// 使用刚指定的配置项和数据显示图表。
chart.setOption(this.option);
},
},
};
</script>
<style scoped>
.simpleDemo {
width: 600px;
height: 300px;
float: left;
margin: 0 auto;
}
</style>
赞 (0)