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();
    });
  • 相关阅读:
    zbb20170802 Windows平台使用Gitblit搭建Git服务器图文教程
    zbb20170728 oracle 查看被锁对象
    zbb20170726 Spring Controller 获取请求参数的几种方法
    zbb20170726 spring访问静态文件访问
    zbb20170720 extjs 类似桌面的页面布局
    zbb20170718 Eclipse 导入外部项目无法识别为web项目并且无法在部署到tomcat下
    zbb20170717Spring4 MVC Hibernate4集成 Annotation maven 各种版本
    zbb20170630 web项目发布至tomcat的ROOT下方法(开发环境和部署环境)
    3.语句的增删改查
    1、java面试
  • 原文地址:https://www.cnblogs.com/auto123-num/p/7084083.html
Copyright © 2011-2022 走看看