ECharts的图表混搭

最新推荐文章于 2024-04-15 09:14:10 发布

狙击hh

最新推荐文章于 2024-04-15 09:14:10 发布

阅读量482

点赞数 16

文章标签： echarts 信息可视化前端

本文链接：https://blog.csdn.net/2403_83177329/article/details/137765098

版权

在ECharts的图表混搭中，一个图表包含唯一图例、工具箱、数据区域缩放、值域漫游模块和一个直角坐标系，直角坐标系可包含一条或多条类目轴线，一条或多条值轴线，类目轴线和值轴线最多上、下、左、右各1 条。ECharts支持任意图表的混搭，其中常见的有折线图与柱状图的混搭、折线图与饼状图的混搭等。利用某地区一年的降水量和蒸发量数据绘制双y轴折线图与柱状图混搭图表。实现效果如下：

代码示例：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
            var option={
            tooltip:{
                trigger:'axis',
                axisPointer:{
                    type:'cross',
                    crossStyle:{
                        coclr:'#999'
                    }//虚线阴影
                }
        },
            legend:{data:["降水量","蒸发量"],left:'center',top:12},
            xAxis:[{
                tyoe:'category',
                data :['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }],
            yAxis:[{
                type:'value',name:'降水量(ml)',min:0,max:350,interval:50,
                axisLine:{lineStyle:{color:'#9999FF'}},
                axisLabel:{formatter:'{value}'}
            },
            {
                type:'value',name:'蒸发量(ml)',min:0,max:300,position:'rigth',
                axisLine:{lineStyle:{color:'#C1EBDD'}},
                axisLabel:{formatter:'{value}'}
            }
        ],
            series:[
                {
                    name:'降水量',type:'bar',
                    itemStyle:{
                        normal:{
                           color:'#45C2E0',
                            label:{show:true,position:'top',formatter:'{b}:{c}'}
                        }
                    },
                    data:[10,20,44,55,300,239,440,59,66,90,29,20]
                },
                {
                    name:'蒸发量',type:'line',
                    yAxisIndex:1,//关键一步
                    itemStyle:{normal:{color:'pink'}},
                    data:[50,40,22,44,34,66,78,230,56,240,223,111]
                }
            ]
        };

         //使用刚指定的配置项和数据显示图表
         myChart.setOption(option); 
    </script>
</body>
 
</html>

在上面中数据的yAxis 数组中，通过代码position:'right' 指定y轴的位置(如没有指定 position 的值,那么默认位置为"left'); 在 series 数组中,通过代码yAxisIndex:1指定使用第2个y轴(0代表第1个 y轴，1代表第2个y轴)。

其中我添加了阴影的部分：

 var option={
            tooltip:{
                trigger:'axis',
                axisPointer:{
                    type:'cross',
                    crossStyle:{
                        coclr:'#999'
                    }//虚线阴影
                }

效果如下：