echart实现彩色柱状图分数图表效果代码-html代码-BFW代码库

echart实现彩色柱状图分数图表效果代码

代码语言：html

所属分类：图表

代码描述：echart实现彩色柱状图分数图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">

</head>

<body style="height: 100%; margin: 0">
    <div id="container" style=" width: 600px;height: 300px;"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        app.title = '柱状图分数划分';
        var namedate = ['小明', '小红', '小张', '小潘', '小陆', '小洪', '大张'];
        var numdate = [60, 70, 80, 50, 70, 90, 100];
        var colorlist = [];
        numdate.forEach(element => {
            if (element < 60) {
                colorlist.push(["#fc7095", "#fa8466"])
        } else if (element >= 60 && element < 90) {
            colorlist.push(["#386ffd", "#74b3ff"])
        } else {
			colorlist.push(["#1aa8ce", "#49d3c6"])
        }
        });
        option = {

            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: namedate,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#4dd1c4",
                            width: 1
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#999'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} 分',
 .........完整代码请登录后点击上方下载按钮下载查看