echarts 双y轴坐标(直方图-折线图) 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts.min.js"></script>
</head>
<body style="background-color:#151414">

    <div id="main" style="width: 100%;height: 500px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var charts = echarts.init(document.getElementById('main'));
        var option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal',
            top: '3%',
            left: 'center',
            textStyle:{
                color:"white"
            },

        },
        xAxis: {
            axisLine: {//x轴线的颜色以及宽度
                show: true,
                lineStyle: {
                    color: "white",
                    width: 0,
                    type: "solid"
                }
            },
            data: ['苹果','香蕉','桃子','西瓜','龙眼']
        },
        yAxis: [
            {
                type: 'value',
                name: '柱状图',
                axisLine: {//y轴线的颜色以及宽度
                    show: true,
                    lineStyle: {
                        color: "white",
                        width: 1,
                        type: "solid"
                    }
                },
            },
            {
                type: 'value',
                name: '折线图(%)',
                axisLabel: {
                    color: 'white'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                      color: 'white'
                    }
                },
                splitLine: {
                    lineStyle: {
                      color: 'white',
                      width: 1,
                      type: 'dotted'
                    }
                },
                nameTextStyle: {
                    rich: {
                      legend: {
                        width: 12,
                        height: 4,
                        backgroundColor: '#87CEFA'
                      },
                      value: {
                        color: '#CD853F'
                      }
                    }
                }
            }
        ],
        series: [{
                name: '直方图',
                type: 'bar',
                //barWidth:30,
                //color: "#333",
                barGap: '30%',//设置不重叠  当值为-100%时重叠
                itemStyle: {
                   normal: {
                    label: {
                     show: true, //开启显示
                     position: 'top', //在上方显示
                     textStyle: { //数值样式
                      color: 'white',
                      fontSize: 10
                     }
                    }
                   }
                },
                data: [453,890,735,696,993]
            },
            
            {
                  name: '直线图',
                  type: 'line',
                  yAxisIndex: 1, //使用index=1的y坐标轴
                  connectNulls:true, //是否连接空数据
                  symbolSize:8,  //设置折线上圆点大小
                  data: [0.28,0.56,0.98,0.65,0.78],
                  label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    color: 'white',
                },
                itemStyle: {
                    color: 'white', // 数据颜色
                    gradientColorNum: 1
                },
                lineStyle:{                 
                  width:2,  // 设置虚线宽度
                  type:'solid'  // 虚线'dotted' 实线'solid'
                }

            }
            ]
        };
       
        charts.setOption(option);
    </script>
</body>
</html>

 

 posted on 2023-05-19 09:57  boye169  阅读(414)  评论(0)    收藏  举报