首页 / 脚本样式 / Echarts / 更改(改变)echarts渲染出来的canvas大小(宽高)

let cityList = ["县1县1", "县2", "县3", "县4", "县5", "县6"];

let baseList = [100000, 15000, 13000, 35000, 34000, 33000];

var dataShadow = [];

var yMax = Math.max(...baseList);

for (var i = 0; i < baseList.length; i++) {

    dataShadow.push(yMax);

}

let option = {

    color: ["#3398DB"],

    tooltip: {

        trigger: "axis",

        axisPointer: {

            // 坐标轴指示器，坐标轴触发有效

            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'

        }

    },

    grid: {

        left: "3%",

        right: "4%",

        bottom: "3%",

        width: "820px",

        height: "280px",

        containLabel: true

    },

    xAxis: [

        {

            type: "category",

            data: cityList,

            axisTick: {

                alignWithLabel: true

            }

        }

    ],

    yAxis: [

        {

            type: "value"

        }

    ],

    series: [

        {

            // For shadow

            type: "bar",

            itemStyle: {

                normal: { color: "rgba(0,0,0,0.05)" }

            },

            barGap: "-100%",

            barWidth: "15px",

            barCategoryGap: "40%",

            data: dataShadow,

            animation: false

        },

        {

            name: "购买总人数",

            type: "bar",

            barWidth: "15px",

            data: baseList,

            itemStyle: {

                color: "#FDC149"

            }

        }

    ]

};

let myChart = this.$echarts.init(this.$refs.totalChart,{width:'880px',height:'300px'});

this.drawImage(myChart, option);