echarts实现多彩自定义样式柱状图图表效果代码-html代码-BFW代码库

echarts实现多彩自定义样式柱状图图表效果代码

代码语言：html

所属分类：图表

代码描述：echarts实现多彩自定义样式柱状图图表效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
    <style>
        #chart {
            width: 600px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="chart"></div>
    <script>
        const myEcharts = echarts.init(document.getElementById('chart'));
        var xData = ["2020", "2021"];
        let colorData = [
          ['#87C53E', '#97D44F'],
          ['#40CDB9', '#2EAE9C'],
          ['#2CB8E6', '#0096C7'],
          ['#2C8CE6', '#1949BF'],
          ['#1949BF', '#2C61E6'],
          ['#341EA9', '#4829E4'],
          ['#6942B0', '#9162DE'],
          ['#9B40CA', '#BE5CDE'],
          ['#E18439', '#FFA127'],
          ['#DF9A37', '#FFC946'],
          ['#D2CB04', '#FFF95A'],
          ['#9FE04B', '#CAFF86']
        ]
        let obj = {
            '1月': [10, 11],
            '2月': [12, 13],
            '3月': [8, 10],
            '4月': [9, 14],
            '5月': [10, 17],
            '6月': [9, 13],
            '7月': [5, 12],
            '8月': [5, 12],
            '9月': [5, 12],
            '10月': [5, 12],
            '11月': [5, 12],
            '12月': [5, 12],
        }
        let testData = [];
        let seriesArr = [];
        for (let item in obj) {
            testData.push(item)
            seriesArr.push(obj[item])
        }
        let lastYear=0;
        let thisYear=0;
        seriesArr.map((i)=>{
            lastYear += parseInt(i[0]);
        thisYear += parseInt(i[1]);
        })
        let sumValue = [lastYear,thisYear];
        let option = {
            backgroundColor: "#1a2439", //背景色
            tooltip: {
                show: false,
            },
            textStyle: {
                color: "#C9C9C9",
            },
            color: ["#74AF2E", "#74AF2E", "#2EAE9C", "#0096C7", "#0279CD", "#1949BF", "#1949BF", '#6942B0', '#9B40CA',
              '#E18439', '#DF9A37', '#D2CB04', '#9FE04B', '#9FE04B'
            ],
            legend: {
                type: "scroll",
                orient: 'vertical',
                selectedMode: false, //图例点击失效
                right: "10%",
                top: "15%",
                textStyle: {
                    color: "#ffffff",
                    fontSize: 14,
                },
            },
            grid: {
                containLabel: true,
                left: "10%",
                top: "20%",
                bottom: "10%",
                right: "30%",
            },
            xAxis: {
                type: "category",
                data: xData,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#B5B5B5",
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    margin: 20, //刻度标签与轴线之间的距离。
                    textStyle: {
                        fontFamily: "Microsoft YaHei",
                        color: "#18BBFF",
                    },
                    fontSize: 16,
                    fontStyle: "bold"
                },
            },
            yAxis: {
                type: "value",
                axisLine: {
                    show: false,
                    lineStyle: {
   .........完整代码请登录后点击上方下载按钮下载查看