echarts柱形图+折线图混合案例

1. 效果图
   
   

2. vue柱形图+折线图组件

<template>
    <div ref="two"></div>
</template>
<script>
    import echarts from "echarts";
    import "echarts/lib/chart/pie";
    import "echarts/lib/chart/line";
    import "echarts/lib/chart/bar";
    import "echarts/lib/chart/map";
    import "echarts/lib/chart/effectScatter";
    import "echarts/lib/chart/scatter";
    import "echarts/lib/chart/lines";
    import "echarts/lib/chart/pictorialBar";
    import "echarts/lib/component/markPoint";
    import "echarts/lib/component/geo";
    export default {
        props: {
            propsData: { type: Array, default: () => [] },
        },
        data() {
            return {};
        },
        mounted() {
            this.two();
        },
        methods: {
            two() {
                const two = echarts.init(this.$refs.two);
                const {
                    xname,
                    legendName,
                    serisesData,
                    title,
                    colorList,
                    barGap,
                } = this.propsData;

                const serises = [];
                for (let i = 0; i < legendName.length; i++) {
                    serises.push({
                        name: legendName[i],
                        type: "bar",
                        data: serisesData[i],
                        barWidth : 18,//柱图宽度
                        barGap: barGap,
                        itemStyle: {
                            normal: {
                                color: colorList[i],
                                barBorderRadius: [30, 30, 0, 0],
                            },
                        },
                    });
                }

                const option = {
                    backgroundColor: "#fff",
                    title: {
                        text: title,
                        x: "25",
                        y: "10",
                        textStyle: {
                            fontWeight: "700",
                            fontSize: 20,
                            color: "#444",
                        },
                    },
                    grid: {
                        left: "3%",
                        right: "3%",
                        bottom: "23%",
                        top: "15%",
                        containLabel: true,
                    },
                    legend: {
                        bottom: 15,
                        textStyle: {
                            color: "#666",
                            padding: [2, 0, 0, 0],
                        },
                        itemGap: 30,
                        itemWidth: 10,
                        itemHeight: 20,
                        data: legendName,
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                        },
                        backgroundColor: "#fff",
                        borderColor: "#ccc",
                        borderWidth: 1,
                        padding: 10,
                        formatter: function (val) {
                            var temp = val.map((item, index) => {
                                return `<span style="display:inline-block; width:10px;height:10px;background:
            ${val[index].color};margin:0 10px 0 0; border-radius:3px">  </span>
             ${val[index].seriesName}: ${val[index].data}人<br/>`;
                            });
                            return `${
                                val[0].axisValueLabel
                            }<br/>${temp.toString().replace(/[,]/g, "")}`;
                        },
                        textStyle: {
                            fontSize: 14,
                            color: "#666",
                        },
                    },
                    toolbox: {
                        show: true,
                        top: 10,
                        right: 25,
                        itemSize: 37,
                        itemGap:0,
                        feature: {
                            magicType: {
                                type: [ "bar","line"],
                                icon: {
                                    bar:
                                        "image://data:image/png;base64,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",
                                    line:
                                        "image://data:image/png;base64,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",
                                },
                            },
                            saveAsImage: {
                                icon:
                                    "image://data:image/png;base64,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",
                            },
                        },
                    },
                    xAxis: [
                        {
                            type: "category",
                            data: xname,
                            axisLabel: {
                                interval:0,
                                //   margin: 20,
                                color: "#666",
                                textStyle: {
                                    fontSize: 12,
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#666",
                                },
                            },
                            axisTick: {
                                show: true,
                                inside: true,
                            },
                        },
                    ],
                    yAxis: [
                        {
                            min: 0,
                            // max: 100,
                            axisLabel: {
                                //   formatter: '{value}%',
                                color: "#666",
                                textStyle: {
                                    fontSize: 14,
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#666",
                                },
                            },
                            axisTick: {
                                inside: true,
                            },
                            splitLine: {
                                show: false,
                            },
                        },
                    ],
                    dataZoom: [
                        {
                            show: true,
                            height: 30,
                            xAxisIndex: [0],
                            bottom: 60,
                            start: 0,
                            end: 100,
                            handleStyle: {
                                color: "#5B3AAE",
                            },
                        },
                        {
                            type: "inside",
                            show: true,
                            height: 15,
                        },
                    ],
                    series: serises,
                };
                two.setOption(option,true);
                window.addEventListener("resize", function () {
                    two.resize();
                });
            },
        }
    };
</script>

<style>
</style>

3. 页面引用

<rich-bar-charts :key="richBarCharts" style="height: 500px;" :propsData="touristStock"></rich-bar-charts>

import RichBarCharts from "../components/echarts/richBarCharts";
export default {
    components: { RichBarCharts},
  data () {
    return {
        richBarCharts:1,
        touristStock:{
            xname:['景点1','景点2','景点3','景点4','景点5','景点6','景点7','景点8'],
            legendName:['进园人数','出园人数'],
            serisesData:[[520,520,205,200,520,764,520,550],[520,764,520,550,520,520,205,200]],
            title:'进出园人数分析',
            colorList:['#01ce8d','#ffa922'],
            barGap:1
        },//进出园人数统计图分析
      }
  }
}