我們今天講解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);
},
}
};
喜歡上方小程序,需要源碼的,私信小編留下郵箱。