• Echart 改变X轴、Y轴、折线的颜色和数值


    在操作E-chart时需要根据需求改变颜色和属性

    图1:

    option = {
    xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
    type: 'value'
    },
    series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    smooth: true
    }]
    };

    图2:

    解决方案:

     option = {
                  //标题
                title: {
                    text: title,
                    //标题样式
                    textStyle: {
                        fontWeight: 'normal',
                        color: '#fff',
                    },
                    //top: 20,
                },
                xAxis: {
                    type: 'category',
                    //x轴字体颜色
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    data: ['0822','0823','0824','0826','0827','0828']
                },
                yAxis: {
                    type: 'value',
                    //y轴颜色
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    //y轴设置为百分比
                    axisLabel: {
                        formatter: '{value}%',
                    },
                    //坐标轴内线的样式
                    splitLine: {
                        lineStyle: {
                            color: '#666',
                            //type:'dashed'虚线
                        }
                    }
                },
                series: [{
                    //折线上数字
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter:'{c}%'
                        }
                    },
                    // 折线颜色
                    itemStyle: {
                        normal: {
                            color: '#33CCFF',
                            lineStyle: {
                                color: '#33CCFF'
                            }
                        }
                    },
                    data:['78.57','50','80','93.33','92.86','100'],
                    type: 'line',
                    smooth: true
                }]
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }      
        }
    

    E-chart 点击事件

    myChart.on('click', function (params) {
    });

  • 相关阅读:
    55. Jump Game
    367. Valid Perfect Square
    22. Generate Parentheses
    254. Factor Combinations
    77. Combinations
    17. Letter Combinations of a Phone Number
    javascript获取随机数的几种方式
    javascript获取随机rgb颜色和十六进制颜色的方法
    javascript遍历数组最优写法
    javascript中字符串的常用方法
  • 原文地址:https://www.cnblogs.com/lcidy/p/9553362.html
Copyright © 2020-2023  润新知