echarts 添加柱状图

最新推荐文章于 2024-05-06 15:49:21 发布

炉火纯青-旺

最新推荐文章于 2024-05-06 15:49:21 发布

阅读量474

点赞数 1

分类专栏： echarts js Chart. 文章标签： echarts

本文链接：https://blog.csdn.net/qq_34870529/article/details/100929507

版权

js 同时被 3 个专栏收录

46 篇文章 1 订阅

订阅专栏

echarts

2 篇文章 0 订阅

订阅专栏

Chart.

2 篇文章 0 订阅

订阅专栏

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

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

<body>
    <div id="gdpBar" style="width: 350px; height: 280px;"></div>
    <script>
        let yDatas = [],
            datas = [],
            ColorList = []; // 置空
        gdps.forEach((gdp, index) => {
            if (index == curIndex) {
                let states = gdp.states;
                states.forEach(state => {
                    yDatas.push(state.name);
                    datas.push(state.gdp);
                    if (state.name == "中国") {
                        ColorList.push("rgba(178,8,1)");
                    } else {
                        ColorList.push("rgb(38,104,202)");
                    }
                })
            }
        })

        // // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('gdpBar'));
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize: 11,
                        color: "#262522"
                    }
                }
            },
            yAxis: {
                type: 'category',
                splitLine: {
                    show: false
                }, //改设置不显示坐标区域内的y轴分割线
                // data: ["美国", "英国", "法国", "中国", "日本", "加拿大", "意大利", "印度", "澳大利亚", "巴西", "瑞典", "土耳其"]
                data: yDatas,
                splitNumber: 1,
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize: 11,
                        color: "#262522"
                    }
                }
            },
            series: [{
                type: 'bar',
                barWidth: 12, // 柱子宽度
                data: datas,
                //配置样式
                itemStyle: {
                    //通常情况下：
                    normal: {
                        color: function (params) {
                            let colorList = ColorList;
                            return colorList[params.dataIndex];
                        }
                    },
                    //鼠标悬停时：
                    emphasis: {
                        color: 'rgba(178,8,1)'
                    }
                }
            }],
            grid: {
                top: 15,
                x: 65,
                x2: 30,
                y2: 30
            }
        };

        // 使用配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

</html>

效果展示：

炉火纯青-旺

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts 添加柱状图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
复制链接

扫一扫