Echarts之Lable颜色自定义

最新推荐文章于 2024-10-12 16:29:10 发布

SwaryLA

最新推荐文章于 2024-10-12 16:29:10 发布

阅读量1.8k

点赞数

分类专栏： vue 文章标签： echarts javascript

本文链接：https://blog.csdn.net/weixin_48927323/article/details/125682059

版权

vue 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

本文详细介绍了如何使用Echarts库创建带有小山和圆点图的图表，包括小山顶部数字的显示、颜色自定义、标签位置、数据转换等功能。示例代码展示了如何设置图表的各个组件，如x轴、y轴、网格以及数据系列的样式。

摘要由CSDN通过智能技术生成

let datas=[];
                for(let i in this.chartData){
                    datas.push({
                        value:this.chartData[i],
                        label: {
                                show: true,//显示小山顶部的数字
                                position: labelPosition[index],//数字显示位置
                                padding: 3,
                                color: '#fff',
                                offset: [0, -5],
                                backgroundColor: this.hillsColor[i],
                                borderRadius:[5,5,5,5],
                                // fontWeight: 'bold',
                                fontSize: 14,
                                formatter: (params)=>{
                                    // console.log(this.isIncome);
                                    if (this.isIncome) {
                                        return this.convertUnitNewline(params.value,'',4) + '\n' + this.hillsUnit;
                                    }
                                    return this.convertUnitNewline(params.value) + this.hillsUnit;
                                }
                            }
                    });
                }

<template>
    <div ref="hills" style="width: 100%; height: 100%"></div>
</template>
 
<script >
    import echarts from 'echarts'
    import "echarts/lib/chart/bar"
    import "echarts/lib/component/tooltip"
    import "echarts/lib/component/grid"
    import {convertUnit,convertUnitNewline,getChartLabel} from "../../lib/tools"
    export default {//小山，柱状图,圆点
        name: "hillsChart",
        data () {
            return {
                year: [],
                value: []
            }
        },
        props: {
            chartData: Array,//小山柱状图的数据
            chartCircleData: Array,//圆环的数据
            chartName: Array,//x轴单位
            hillsColor: Array,//小山颜色
            //labelBgColor: ['rgba(97,147,227,0.5)','rgba(248,207,112,0.5)'],
            labelBgColor: ['red','blue'],//lable背景颜色
            hillsUnit: String,
            isIncome: Boolean,
            isMobile:Boolean
        },
        computed: {
            option() {
                let xPositon = ['bottom','top'];
                let labelPosition = ['top','bottom'];
                let index = 0;
                let label = getChartLabel(this.isMobile);
                if (this.chartData[0] < 0 && this.chartData[1] < 0) {
                    index = 1
                }
                //=====================lable颜色自定义==========================
                let datas=[];
                for(let i in this.chartData){
                    datas.push({
                        value:this.chartData[i],
                        label: {
                                show: true,//显示小山顶部的数字
                                position: labelPosition[index],//数字显示位置
                                padding: 3,
                                color: '#fff',
                                offset: [0, -5],
                                backgroundColor: this.hillsColor[i],
                                borderRadius:[5,5,5,5],
                                // fontWeight: 'bold',
                                fontSize: 14,
                                formatter: (params)=>{
                                    // console.log(this.isIncome);
                                    if (this.isIncome) {
                                        return this.convertUnitNewline(params.value,'',4) + '\n' + this.hillsUnit;
                                    }
                                    return this.convertUnitNewline(params.value) + this.hillsUnit;
                                }
                            }
                    });
                }
                let axis = [];
                for(let i in this.chartName){
                    axis.push({
                        value:this.chartName[i],
                        textStyle:{
                            color: '#474747'
                        }
                    });
                }
                //=====================================================
                return {
                    grid: {
                        left: '5%',
                        // right: '0%',
                        top: '20%',
                        bottom: '20%',
                        containLabel: false
                    },
                    xAxis: {
                        type: 'category',
                        data: axis,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#4A4A4A',
                                fontSize: label.fontSize
                            }
                        }
                    },
                    yAxis: {
                        splitLine: {show: false},
                        axisTick: {show: false},
                        axisLine: {show: false},
                        axisLabel: {show: false}
                    },
                    series: [
                        {//显示小山
                        name: 'hill',
                        type: 'pictorialBar',
                        barCategoryGap: '-10%',
                        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                        data: datas,
                        symbolSize: ['100%','100%'],
                        z: -10,
 
                        },
                        {//显示圆点
                            data: this.chartCircleData,
                            type: 'line',
                            symbol:'circle',
                            symbolSize:12,
                            itemStyle:{
                                color: '#F2F2F2',
                                borderColor:"#A89463",
                                borderWidth:2
                            },lineStyle: {//隐藏圆点之间的直线
                                normal: {
                                    opacity: 0
                                }
                            },label: {
                                show: false,//显示圆点顶部的数字
                                position: labelPosition[index],//数字显示位置
                                padding: 3,
                                color: '#fff',
                                offset: [0, -5],
                                backgroundColor: '#A89463',
                                borderRadius:[5,5,5,5],
                                // fontWeight: 'bold',
                                fontSize: 14,
                                formatter: (params)=>{
                                    // console.log(this.isIncome);
                                    if (this.isIncome) {
                                        return this.convertUnitNewline(params.value,'',4) + '\n' + this.hillsUnit;
                                    }
                                    return this.convertUnitNewline(params.value) + this.hillsUnit;
                                }
                            }
 
                        }
                    ]
                }
            }
        },
        methods:{
            //根据参数来设置柱状颜色
            setStyle: function(){
                var that = this;
                this.option.series[0].itemStyle={
                    //通常情况下：
                    normal:{
                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                        color: function (params){
                            let colorList = that.hillsColor;
                            return colorList[params.dataIndex];
                        },
                        // opacity:0.8,
                        barBorderRadius: 5,
                    }
                }
            },
            convertUnit: convertUnit,
            convertUnitNewline: convertUnitNewline,
            initChart(){
                // console.log(this.chartName);
                // console.log(this.chartData);
                let myChart=echarts.init(this.$refs.hills);
                this.setStyle();
                myChart.setOption(this.option);
                myChart.resize();
            },
 
        },
        mounted(){
            this.$nextTick(() => {
                this.initChart();
            })
        },
    }
</script>
 
<style scoped>
 
</style>