echarts象形柱图 pictorialBar

项目需求

这种属于series-> type的类型是pictorialBar 很多怪形的柱形图都是使用它, 只需要修改series -> symbol的值就可以, 在这里他的类型值是'react'

我建议可以复制我这段代码自己跑一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--2.为ECharts准备一个具备大小的DOM-->
<div id="main" style="width: 600px;height: 400px; border: 1px solid #000;"></div>
<!--1.引入ECharts文件-->
<script src="echarts.min.js"></script>
<script>
    //
    //    可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
    //
    //
    //    3.基于准备好的dom,初始化ECharts实例
    var chartData = [100, 200, 300]; // 数据
    var yMax = ''; // 最大值
    for (var i = 0; i < chartData.length; i += 1) {
        yMax = chartData[i];
    }
    yMax += yMax / 10;
    var yMaxArr= []; // 全部都是最大值, 做图形的底部灰色打底
    for (var i = 0; i < chartData.length; i += 1) {
        yMaxArr.push(yMax);
    }
    var chartName = ['你这么笨!', '还不努力,', '你想干嘛?']
    var myChart = echarts.init(document.getElementById("main"));
    //4.制定图标的配置项和数据
    var option = {
        // backgroundColor: '#0f375f',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // type: 'none', // 去除鼠标移入的时候的阴影/竖线等
            },
            backgroundColor: '#ccc', // 浮层的文本背景
            textStyle: {
                color: 'red', // 浮层的文本颜色
            },
            // formatter: '{a0}: {c0}<br />{a1}: {c1}'
            formatter: '{a}:{c}', //浮层内容格式 a: series中的name c 数据值
        },
        legend: {
            textStyle: {
                color: '#ccc'
            },
        },
        xAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            },
            show: false,
            splitLine: {
                show: false
            },
        },
        yAxis: [{
            type: 'category',
            data: chartName,
            splitLine: {
                show: false
            },
            show: false,
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            }
        }, { // 第二个y轴 为了让数据在右侧末尾显示
            show: true,
            inverse: true,
            data: chartData,
            nameTextStyle: {},// 坐标轴名称的文字样式。 官网上是这样的解释, 但是 我试了这个并不能改变坐标轴的文字样式
            axisLabel: {
                textStyle: {
                    fontSize: 12, //坐标轴名称的大小
                    color: 'blue', // 坐标轴名称的颜色
                },
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },

        }],
        series: [{
            name: '我是打底',
            type: 'pictorialBar',
            symbol: 'rect', // 类型
            yAxisIndex: 0,
            barWidth: 10,
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: '#ccc',
                }
            },
            label: {
                normal: {
                    position: 'right',
                }
            },
            symbolRepeat: true,
            symbolRotate: '45',
            symbolSize: [12, 4],
            symbolMargin: 2,
            data: yMaxArr,
        }, {
            name: '我是上层方块',
            type: 'pictorialBar',
            symbol: 'rect',
            itemStyle: {
                normal: {
                    color: 'red'
                }
            },
            label: {
                normal: {
                    // show: true, // 数据大小的显示, 100 200 300
                    textStyle: {
                        color: '#000000', // 颜色
                    },
                    position: 'right',
                },
            },
            barWidth: 10,
            symbolRepeat: true,
            symbolRotate: '45',
            symbolSize: [12, 4],
            symbolMargin: 2,
            data: [100, 200, 300],
        },
        // 数据条--------------------我是分割线君------------------------------//
        {
            show: true,
            type: 'bar',
            // xAxisIndex: 1, //代表使用第二个X轴刻度
            barGap: '-100%',
            barWidth: '10%',
            itemStyle: {
                normal: {
                    barBorderRadius: 200,
                    // color: 'yellow',
                    color: 'transparent', //rgba(22,203,115,0.05) 数据条柱状图的填充颜色,, 一开始我的有一点点背景颜色
                }
            },
            label: {
                normal: {
                    show: true,
                    position: [0, '-20'],
                    textStyle: {
                        fontSize:14,
                        color: 'pink',
                    },
                    formatter: function(data) {
                        return chartName[data.dataIndex];
                    }
                }
            },
            data: chartData
        }
    ]
    };
    // 5.使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>
</body>
</html>

echarts象形柱图 pictorialBar

这个是注意点 color的颜色一定要是透明色, 因为这个颜色是柱状图的填充色,
echarts象形柱图 pictorialBar

 yAxis: [ { // 第二个y轴 为了让数据在右侧末尾显示
            show: true,
            inverse: true,
            data: chartData,
            nameTextStyle: {},// 坐标轴名称的文字样式。 官网上是这样的解释, 但是 我试了这个并不能改变坐标轴的文字样式
            axisLabel: {
                textStyle: {
                    fontSize: 12, //坐标轴名称的大小
                    color: 'blue', // 坐标轴名称的颜色
                },
            },
        }],

不知道你们有没有碰到修改坐标轴名称的颜色问题, 向我这种坐标轴线不显示的还好, 可以设置坐标轴线的颜色, 因为坐标轴名称的颜色默认的取的就是坐标轴线的颜色,

如果显示了轴线呢? 坐标轴线的颜色和坐标轴名称的颜色不一样的话怎么办, 查了文档, 说是使用nameTextStyle就可以, 但是并没有效果, 自己琢磨的时候意外发现使用axisLabel可以修改, 值得记录一下

echarts象形柱图 pictorialBar

相关推荐