echart地图(地图)响应式（自适应）解决方法，echart图表(地图)中任意位置自定义动态文字解决方法

历飞雨和韩跑跑

已于 2022-04-15 10:42:07 修改

阅读量2k

点赞数

分类专栏： web JS 文章标签： javascript

于 2022-04-02 16:40:33 首次发布

本文链接：https://blog.csdn.net/qq_40739261/article/details/123923175

版权

JS 同时被 2 个专栏收录

18 篇文章 2 订阅

订阅专栏

web

11 篇文章 0 订阅

订阅专栏

本文介绍了如何实现Echarts图表在窗口大小变化时的响应式布局，包括使用window.resize事件监听和JQuery方法。同时，展示了如何在图表内部添加自定义文字并设置样式，以及在多个图表共用同一options时的调整策略。对于多图表场景，提供了不同的处理方式，确保每个图表都能正确调整大小。

摘要由CSDN通过智能技术生成

最近项目开发实现可视化，用了许多图表，遇到一些问题。

1、如何让图表(地图)响应式或自适应

单个图表解决

window.onresize = myChar.resize;

或
使用JQuery监听

 $(window).resize(function(){
myChart.resize();
})

或直接监听

window.addEventListener("resize", function () {
        myChart.resize();
});

多个图表
一 div 多图表

window.addEventListener("resize", function () {
        myChart1.resize();
        myChart2.resize();
});

一 div 一图表，直接类似单图表

window.addEventListener("resize", function () {
        myChart.resize();
});

多个图表共用一个options

var myChart ={};
myChart[refVal] = echarts.init(this.$refs[refVal]);
myChart[refVal] .setOption(option, true);
window.addEventListener("resize", function () {
        myChart[refVal].resize();
});

图表中任意位置写自定义的文字，可设置样式等

option ={
...,
	graphic:{
		elements:[
			{
			type: "text",
              id: "text1",//建议加上，无论有多少文段，id不能重复
              left: "20",//在图表中离左侧距离
              top: "10",//离上面距离
              style: {
                text: "计划数量：",//展示的字
                textAlign: "center",
                fill: "#333",//颜色
                fontSize: 12,
                fontWeight: 400,
              },
			}，{
			type: "text",
              id: "text2",//建议加上，无论有多少文段，id不能重复
              left: "100",//在图表中离左侧距离
              top: "10",//离上面距离
              style: {
                text: "100个：",//展示的字
                textAlign: "center",
                fill: "#333",//颜色
                fontSize: 12,
                fontWeight: 700,
              },
			}，
			.....
		]
	}

}