echarts图动态生成,以及echarts自适应

最新推荐文章于 2025-05-19 15:59:47 发布

郭豪杨

最新推荐文章于 2025-05-19 15:59:47 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_42603150/article/details/80927535

本文介绍了如何动态生成ECharts图表，包括解决环形图堆叠问题、过多tooltip显示异常、实现图表自适应布局。同时，提供了针对ECharts Y轴隐藏、单位调整、X轴数字剪切等细节优化的配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://www.cnblogs.com/jessical626/p/7109799.html

如果是异步请求

<div id="brn_div_echarts">

</div>

async:true,

var echart=[{name:'2月9日',data_str:["27943189","4025846","3818195",'3867360','582438','4025845','975370']},
            {name:'差值',data_str:["27982847","3978017.1","3774832",'3827630.1','565906','3978015.4','945352.86']},
            {name:'平均值',data_str:["-39658","47828","43362",'39729','16531','47829','30017']},
           ];

var echart_x=['AAA话单数','去重宽带数','开始账号数','停止账号数','实时账号数','IPV4账号数','IPV6账号数']
function echarts_bar(id,data,echart_x){
    var dom = document.getElementById(id);
    var myChart = echarts.init(dom);
    var app = {};
    var echart_ser=[];
    var echart_name=[];

    for(var i=0;i<data.length;i++){
        echart_name.push(data[i].name)
        echart_ser.push({
            name: data[i].name,
            type: 'bar',
            smooth: false,
            data:data[i].data_str,
            barWidth: '15',
        })
    }

    $('#'+id).resize(function () {
        myChart.resize();
    });
    option = null;
    option = {
        legend: {
            data: echart_name
            // left: 10