vue实现echarts随页面大小变化而改变

最新推荐文章于 2024-05-21 11:45:07 发布

codeMing_

最新推荐文章于 2024-05-21 11:45:07 发布

阅读量726

点赞数

文章标签： vue.js echarts 前端

本文链接：https://blog.csdn.net/q879936814/article/details/132359695

版权

实现思路：监听页面变化，然后调用echarts的resize方法。

data(){
	return {
		pie1: ''
	}
},
mounted() {
    window.addEventListener("resize", () => {
  
      this.pie1.resize();
     
    });
    setTimeout(() => {
      this.initEchart1();
      
    });
  },
methods: {
	initEchart1() {
      var chartDom = document.getElementById("pie1");

      var myChart = echarts.init(chartDom);
      this.pie1 = myChart;
      var option;

      option = {
        legend: {
          orient: "vertical",
          right: "10%",
          top: "60",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "60%",
            center: ["30%", "50%"],
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              { value: 1048, name: "未完成", itemStyle: { color: "#1DE9CB" } },
              { value: 735, name: "已完成", itemStyle: { color: "#F1A449" } },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
      myChart.resize();
    },
}