VUE中echarts多個柱狀圖，折線圖混用
修改template：
?<div?class="echart"?id="mychart"?:style="myChartStyle"></div>
修改script：
import * as echarts from "echarts";
export default {
? data() {
? ? return {
? ? ? xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //橫坐標
? ? ? yData: [23, 24, 18, 25, 27, 28, 25], //人數(shù)數(shù)據(jù)
? ? ? taskDate: [10, 11, 9, 17, 14, 13, 14],
? ? ? taskDate2: [15, 19, 3, 23, 22, 11, 17],
? ? ? myChartStyle: { float: "left", width: "100%", height: "400px" } //圖表樣式
? ? };
? },
? mounted() {
? ? this.initEcharts();
? },
? methods: {
? ? initEcharts() {
? ? ? // 多列柱狀圖
? ? ? const mulColumnZZTData = {
? ? ? ? xAxis: {
? ? ? ? ? data: this.xData
? ? ? ? },
? ? ? ? // 圖例
? ? ? ? legend: {
? ? ? ? ? data: ["人數(shù)", "任務數(shù)","完成數(shù)"],
? ? ? ? ? top: "0%"
? ? ? ? },
? ? ? ? yAxis: {},
? ? ? ? series: [
? ? ? ? ? {
? ? ? ? ? ? type: "bar", //形狀為柱狀圖
? ? ? ? ? ? data: this.yData,
? ? ? ? ? ? name: "人數(shù)", // legend屬性
? ? ? ? ? ? label: {
? ? ? ? ? ? ? // 柱狀圖上方文本標簽，默認展示數(shù)值信息
? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? position: "top"
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? type: "line", //形狀為折線圖
? ? ? ? ? ? data: this.taskDate2,
? ? ? ? ? ? name: "完成數(shù)", // legend屬性
? ? ? ? ? ? label: {
? ? ? ? ? ? ? // 柱狀圖上方文本標簽，默認展示數(shù)值信息
? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? position: "top"
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? type: "bar", //形狀為柱狀圖
? ? ? ? ? ? data: this.taskDate,
? ? ? ? ? ? name: "任務數(shù)", // legend屬性
? ? ? ? ? ? label: {
? ? ? ? ? ? ? // 柱狀圖上方文本標簽，默認展示數(shù)值信息
? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? position: "top"
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ]
? ? ? };
? ? ? const myChart = echarts.init(document.getElementById("mychart"));
? ? ? myChart.setOption(mulColumnZZTData);
? ? ? //隨著屏幕大小調(diào)節(jié)圖表
? ? ? window.addEventListener("resize", () => {
? ? ? ? myChart.resize();
? ? ? });
? ? }
? }
};
然后style刪除了就可以了
可隨窗口大小調(diào)整圖大小
