eCharts绘制双系列混合类型图表+额外tooltip信息

直接上效果图，双Y轴，双系列+额外tooltip信息

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('myAreaChart'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '各县区数据情况'
        },
        tooltip: {
            trigger: 'axis',
            // 添加水平辅助线
            axisPointer: {
                type: 'cross'
            },
            formatter: function (param) {
                // param传入的是整个series对象，因此item1对应的是包含自定义tooltip信息的工业总产值，item2对应的是增速
                var item1 = param[0];
                var item2 = param[1];
                // 分别根据item1和item2对应的颜色属性自定义一个圆点样式，dot3纯静态自定义样式，用于额外的rank属性
                var dot1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item1.color + '"></span>';
                var dot2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item2.color + '"></span>';
                var dot3 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#ccc"></span>';
                return dot1 + '工业总产值：' + item1.data.value + '<br/>' + dot2 + '增速：' + item2.data + '<br/>' + dot3 + '排名：' + item1.data.rank;
            }
        },
        // 添加图例,位置放在底部居中
        legend: {
            data: ['工业总产值', '增速'], 
            bottom: 10,
            left: 'center',
        },
        // x轴标签
        xAxis: {
            data: ["文峰区", "北关区", "殷都区", "龙安区", "安阳县", "汤阴县"]
        },
        // 双y轴标签,默认自动计算刻度范围
        yAxis: [{
            name: '工业总产值',
            type: 'value'
        }, {
            name: '增速',
            type: 'value'
        }],
        // 传入一个柱状图+一个折线图,其中柱状图的数据中额外包含用于tooltip的信息
        series: [{
            name: '工业总产值',
            type: 'bar',
            yAxisIndex: 0,
            // data传入字典类型数组，value为要在图表中显示的值，rank是自定义的用于tooltip的内容
            data: [{ value: 5000, rank: 1 }, { value: 2000, rank: 5 }, { value: 3600, rank: 2 }, { value: 1000, rank: 4 }, { value: 1500, rank: 6 }, { value: 2500, rank: 3 }]
        }, {
            name: '增速',
            type: 'line',
            yAxisIndex: 1,
            data: [15, 10, 26, 40, 20, 5]
        }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>