记录echarts图表的一些配置修改

function initEchart() {

    // 基于准备好的dom,初始化echarts实例

    var myChart = echarts.init(document.getElementById('qualityChartsZ'));


    // 指定图表的配置项和数据

    var option = {

        tooltip: {

            trigger: 'axis',

            backgroundColor: '#f9fbfe',

            padding: 15,

            textStyle: {

                color: '#333'

            },

            // formatter: "{a} <br/>{b} : {c} ({d}%)",

            extraCssText: 'box-shadow: 0 0 3px 1px rgba(230, 230, 230, 0.8);'

        },

        color: ['#efb724', '#5e8dff'],

        legend: {

            data: ['质检项1', '质检项3'],

            textStyle: {

                fontSize: 14,

                color: '#333333'

            },

            itemGap: 30,        //每项之间间隔

            bottom: 10,

            icon: 'circle',

            itemWidth: 12,         // 设置宽度

            itemHeight: 12,        // 设置高度

        },

        dataset: {

            dimensions: ['product', '质检项1', '质检项3'],

            source: [

                { product: '2021-08-01', '质检项1': 43.3, '质检项3': 85.8 },

            ]

        },

        xAxis: {

            type: 'category',

            axisTick: {       //y轴刻度线

                "show": false   

            },

            axisLine: {

                lineStyle: {

                    type: 'solid',

                    color: '#b7bbc3',

                    width: '1'     //坐标线的宽度

                }

            },

            axisLabel: {         //y轴坐标文字

                textStyle: {

                    color: '#211e1e', //坐标值的具体的颜色

                    fontSize: 12

                }

            }

        },

        yAxis: {

            type: 'value',

            splitLine: {

                show: false

            },                    //网格线

            axisLine: {

                lineStyle: {

                    type: 'solid',

                    color: '#b7bbc3',

                    width: '1'    //坐标线的宽度

                }

            },

            axisLabel: {                    //y轴坐标文字

                formatter: '{value}%',

                textStyle: {

                    color: '#211e1e',     //坐标值的具体的颜色

                    fontSize: 12

                },

            },

            splitLine: {

                show: true,

                lineStyle: {        // 使用深浅的间隔色

                    color: '#e6eaf5',

                    type: "dashed"

                }

            },

            axisTick: {                        //y轴刻度线

                "show": false

            }

        },

        grid: {

            left: 0,

            right: 0,

            top: 40,

            containLabel: true

        },

        series: [

            {

                name: "质检项1",

                type: 'bar',

                barWidth: 15,    //柱图宽度

                // data: data.accessData

            },

            {

                name: '质检项3',

                type: 'bar',

                barWidth: 15,    //柱图宽度

                // data: data.manualData

            }

        ]

    };


    // 使用刚指定的配置项和数据显示图表。

    myChart.setOption(option);

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值