• ECharts百度如果绘图完整后,浏览器窗口大小发生变化,使图表跟着变化


    var myChart = echarts.init(document.getElementById('chart1'));
    var myChart2 = echarts.init(document.getElementById('chart2'));
    var myChart3 = echarts.init(document.getElementById('chart3'));
    option = {
    tooltip: {
    trigger: 'axis'
    },
    grid: {
    left: '3%',
    right: '4%',
    bottom: '9%',
    containLabel: true
    },
    toolbox: {
    feature: {
    saveAsImage: {}//将统计图保存为
    }
    ,right:100
    ,top:0
    },
    xAxis: {
    type: 'category',
    boundaryGap:false,
    data:['11.07','11.08','11.09','11.10','11.11','11.12','11.13','11.14','11.15','11.16']
    },
    yAxis: {
    type: 'value'
    /*min:0,
    max:60,
    splitNumber:6*/
    },
    series: [
    {
    name:'浏览次数',
    type:'line',
    stack: '总量1',
    areaStyle: {normal: {}},
    data:['10','22','10','50','13','31','15','10','22','10'],
    itemStyle : {normal : {color:'#32A8FF'}}
    }
    ]
    };
    option2 = {
    title: {
    x:"left",
    text: '门票销量',
    textStyle:{
    fontSize:14
    ,fontWeight:'normal'
    ,color:'#565656'
    }
    ,left:20
    ,top:10
    },
    color: ['#32A8FF'],
    tooltip : {
    trigger: 'axis',
    axisPointer : { // 坐标轴指示器,坐标轴触发有效
    type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
    }
    },
    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
    },
    xAxis : [
    {
    type : 'category',
    data : ['免费票', '589元', '998元', '1288元'],
    axisTick: {
    alignWithLabel: true
    }
    }
    ],
    yAxis : [
    {
    type : 'value'
    }
    ],
    series : [
    {
    name:'销量',
    type:'bar',
    barWidth: '60%',
    data:[10, 52, 200, 334]
    }
    ]
    };
    option3 = {
    title: {
    x:"left",
    text: '收入',
    textStyle:{
    fontSize:14
    ,fontWeight:'normal'
    ,color:'#565656'
    }
    ,left:20
    ,top:10
    },
    tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
    data:['线下支付','微信支付'],
    color:['#32A8FF',' #02C800'],
    orient:'vertical'
    ,right:20
    ,top:10
    ,textStyle:{
    color:['#32A8FF',' #02C800']
    }
    ,itemWidth:14
    },
    series: [
    {
    name:'收入总额¥1200',
    type:'pie',
    radius:['50%','70%'],
    avoidLabelOverlap:false,
    color:['#32A8FF',' #02C800'],
    data:[{value:'334',name:'线下支付'},{value:566,name:'微信支付'}]
    }
    ]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
    myChart2.setOption(option2);
    myChart3.setOption(option3);
    /*窗口自适应,关键代码*/
    $(window).resize(function(){
    myChart.resize();
    myChart2.resize();
    myChart3.resize();
    });
  • 相关阅读:
    超级文件夹管理器
    基于IAP和网口升级固件
    经典排序之高速排序
    hdu 4908 BestCoder Sequence
    Boost.Asio c++ 网络编程翻译(11)
    Silverlight 5 Grid组的MouseLeave响应
    Linux下实现RAID
    关于相互排斥运行的设计与实现
    Codeforces 309C Memory for Arrays 二进制模拟进位
    sharepoint 2013 资源管理器copy大文件到本地失败解决方法
  • 原文地址:https://www.cnblogs.com/auto123-num/p/7084083.html
Copyright © 2020-2023  润新知