背景

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 50 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/junmoli/p/8697939.html

文章标签：

#xhtml #javascript #ViewUI

本文展示了一个使用ECharts绘制的柱状图示例，该图表通过不同的颜色展示了成绩是否达到70分以上的标准，并使用了透明度设置背景条形图。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--<meta name="viewport" content="width = device-width,initial-scale=1,maximum-scale=1"/>-->
        <title>鼠标的距离</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="echarts.min.js"></script>

    </head>
    <style type="text/css">



    </style>
<body>
    <div id="main" style="width: 600px; height: 400px;">

    </div>
</body>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));


var colorList = [];
    option = {
        calculable : true,
        tooltip : {
            trigger: 'axis'
        },
        xAxis : [
            {
                type : 'value',

                axisLabel:{formatter:'{value} 分'}

            },
            //辅助x轴

        ],
        yAxis : [
            {
                type : 'category',
                data : ['s1','s2','s3','s4','s5']
            },
            {
                type : 'category',
                axisLine: {show:false},
                axisTick: {show:false},
                axisLabel: {show:false},
                splitArea: {show:false},
                splitLine: {show:false},
                data : ['s1','s2','s3','s4','s5']
            }
        ],
        series : [
            {
                name:'成绩',
                type:'bar',
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return colorList[params.dataIndex]
                        }
                    }
                },
                data:[70,80,50,90,100]
            },
            //背景
            {
                name:'成绩',
                type:'bar',
                yAxisIndex:1,
                //颜色需要有透明度
                itemStyle: {normal: {color:'rgba(102, 102, 102,0.5)'}},
                //data填你需要的背景的值
                data:[100,100,100,100,100]
            },
        ]
    };
    for(var i in option.series[0].data){
        colorList[i]=option.series[0].data[i]>70 ? '#F08080' : '#7EC0EE';
    };
    myChart.setOption(option);
</script>
</html>