我们今天讲解vue-echarts的开发使用方法,我们先看效果;
我们直接贴代码,对应效果会有注释。
<template>
<div class="echarts-box">
<div id="chart_example" style=' width: 420px;height: 300px;'></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
};
},
mounted() {
this.initData();
},
methods: {
initData() {
let this_ = this;
let myChart = echarts.init(document.getElementById("chart_example"));
let option = {
color: ["#29C37F"],//柱体颜色
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
xAxis: [
{
type: "category",
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
axisLine: {show:false},//轴线不显示
axisTick: {
alignWithLabel: false
},
axisLabel: {
interval: 0, //底部完整显示
textStyle: { //修改底部字体颜色
color: "#999999"
}
}
}
],
yAxis: [
{
show: false,//隐藏y方向刻度
type: "value",
textStyle: {
color: "#999999"
}
}
],
series: [
{
name: "每月花费",
type: "bar",
barWidth: "50%",
data: [995, 666, 444, 858, 654, 236, 645, 546, 846, 225, 547, 356],
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
textStyle: {
//数值样式
color: "#29C37F",
fontSize: 8
}
}
}
}
}
]
};
myChart.setOption(option);
},
}
};
喜欢上方小程序,需要源码的,私信小编留下邮箱。