zoukankan      html  css  js  c++  java
  • 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();
    });
  • 相关阅读:
    重温servlet③
    重温servlet②
    修改servlet的模板代码
    Oracle网络服务管理与配置
    Oracle数据库的启动与关闭
    java多线程
    SQL 查询
    Oracle索引表
    Oracle索引(2)索引的修改与维护
    Oracle索引(1)概述与创建索引
  • 原文地址:https://www.cnblogs.com/auto123-num/p/7084083.html
Copyright © 2011-2022 走看看