ECharts的图表混搭

最新推荐文章于 2024-11-14 15:34:44 发布

原创

最新推荐文章于 2024-11-14 15:34:44 发布 · 729 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #信息可视化 #前端

在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',
                axisPoin