1
回答
ECharts多图联动:如何将两个图水平放置
利用AWS快速构建适用于生产的无服务器应用程序,免费试用12个月>>>   

请问,引用ECharts官网例子-多图联动:如何将两个图水平放置?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>stock</title>
   
</head>




<body>
    <div id="main" style="width:500px;height:350px"></div>
<div id="main2" style="width:1000px;height:350px"></div>
<!-- <script src="./doc/example/www/js/echarts.js"></script> -->
<script src="../build/dist/echarts.js"></script>
<script type="text/javascript">


    require.config({
   paths:{ 
  //      echarts:'./doc/example/www/js'
          echarts:'../build/dist'

    }
    });
    require(
        [
            'echarts',
'echarts/chart/line',
'echarts/chart/pie',
   'echarts/chart/bar'

],


function (ec) {               
     var myChart = ec.init(document.getElementById('main'));
var myChart2 = ec.init(document.getElementById('main2'));


       




 // 基于准备好的dom,初始化echarts图表


option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    calculable : true,
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '50%',
            center: ['50%', 150],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};


option2 = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {
            type: 'shadow'
        }
    },
    legend: {
x:'500',
y : 'top',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    toolbox: {
        show : true,
        orient : 'vertical',
        y : 'center',
        feature : {
            mark : {show: true},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            splitArea : {show : true}
        }
    ],
    grid: {
       x:'550',
 y:'50',  
  width:'350',
  height:'250',
    },
    series : [
        {
            name:'直接访问',
            type:'bar',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'邮件营销',
            type:'bar',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'bar',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'bar',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'搜索引擎',
            type:'bar',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};


myChart2.setOption(option2);
myChart.connect(myChart2);
myChart2.connect(myChart);


setTimeout(function (){
    window.onresize = function () {
        myChart.resize();
        myChart2.resize();
    }
},200)




                // 为echarts对象加载数据 
                myChart.setOption(option); 
 }
);                  
     


</script>




</body>
</html> 


举报
moqililuo
发帖于2年前 1回/4K+阅
顶部