<template>
<div class="echart" id="mychart" :style="myChartStyle"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
};
},
mounted() {
this.initEcharts();
},
methods: {
initEcharts() {
// 基本柱状图
const option = {
title: {
text: "ECharts",
},
tooltip: {},
legend: {
data: ["睡眠"],
},
xAxis: {
// data: ["2202-01", "2202-02", "2202-03", "2202-04"],
data: [
"2202-01",
"2202-02",
"2202-03",
"2202-04",
"2202-05",
"2202-06",
"2202-07",
"2202-08",
],
},
yAxis: {
min: 0,
max: 4,
axisLabel: {
formatter: function (value) {
var texts = [];
if (value <= 1) {
texts.push("没睡");
} else if (value <= 2) {
texts.push("翻身");
} else if (value <= 3) {
texts.push("熟睡");
} else {
texts.push("深睡");
}
return texts;
},
},
},
series: [
{
name: "销量1",
type: "bar",
data: [
{
value: 1,
itemStyle: {
color: "#a90000",
},
},
4,
2,
3,
2,
8,
],
},
],
};
const myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
},
},
};
</script>