echart 如何修改折线图的原点的颜色添加提示信息和修改y轴的文字样式。

发布于 2022-09-06 21:51:03 字数 1990 浏览 13 评论 0

就是我图片圈起来的地方图片描述

这是我的代码 新手求大神指教

option = {
    tooltip : {
        trigger: 'axis',
     
    },
    
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
     
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['2012','2013','2014','2015','2016','2017','2018']
        }
    ],
   grid: {
           'backgroundColor':'rgba(10,220,110,.5)',
           height:'200'
        },
     
    yAxis : [
        {
            type : 'value'
        }
    ],

axisLabel:{
        textStyle:{
             color:"#333333"//x轴,y轴的数字颜色,如图1
        }
    },
    axisTick:
    {
        show: false,
    },

    series : [

        {
            name:'推广流量',
            type:'line',
            stack: '总量',
            symbol:'circle',
            symbolSize:"10",
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
               color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
        offset: 1, color: '#fefeff' // 0% 处的颜色
    }, {
        offset: 0.4, color: '#e8efff' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
},
              itemStyle: {
                normal: {
                    areaStyle: {
                        // 区域图,纵向渐变填充
                     
                    },
                    lineStyle:{  
                     color:'#f68698'  
                                    }  
                }
            },

            data:[50, 110, 80, 200, 240, 70, 350]
        },
       
    ]
};

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

别挽留 2022-09-13 21:51:03

axisLabel: { //处理单位相关
formatter: '{value}单位'
},
axisLine: { //处理坐标轴颜色

        lineStyle: {
            color: 'red',
        }
    },

axisLabel: { //处理坐标轴字体

        color: '#000',   
    }
紫竹語嫣☆ 2022-09-13 21:51:03

其实网上很多,
`//设置坐标轴的颜色
xAxis: [
{

type : 'category',
data : [],
splitLine: false,
nameTextStyle: {
  color: '' // x坐标轴名称文字样式
},
axisLine: {
  lineStyle: {
    color: '' //坐标轴线颜色
  }
}

}
]

//设置折现的颜色和折点的颜色

            series: [{
                data: number,
                type: 'line',
                itemstyle : {
                    normal : {
                        linestyle:{
                            color:'#16e868',
                        },
                        bordercolor:"#16e868"
                    }
                },
            }]
            

//设置坐标字体颜色

                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'white'
                        }
                    },`
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文