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], //人数数据
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: ["人数", "任务数","完成数"],
top: "0%"
},
yAxis: {},
series: [
{
type: "bar", //形状为柱状图
data: this.yData,
name: "人数", // legend属性
label: {
// 柱状图上方文本标签，默认展示数值信息
show: true,
position: "top"
}
},
{
type: "line", //形状为折线图
data: this.taskDate2,
name: "完成数", // legend属性
label: {
// 柱状图上方文本标签，默认展示数值信息
show: true,
position: "top"
}
},
{
type: "bar", //形状为柱状图
data: this.taskDate,
name: "任务数", // legend属性
label: {
// 柱状图上方文本标签，默认展示数值信息
show: true,
position: "top"
}
}
]
};
const myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(mulColumnZZTData);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
}
}
};
然后style删除了就可以了
可随窗口大小调整图大小
