• echarts常用的配置项


    最近使用echarts可视化的业务,但是有一些配置项需要修改,把这段时间的学习总结一下

    1. 修改默认配置

     a. 去掉分割线和网格线,在xAxis或者yAxis中设置  

        splitLine: {
            show: false
        }

     b. 修改标题背景和颜色

          

    title: {
            backgroundColor: '#fff',
            textStyle: {
                fontWeight: 'normal',
                color: '#ff00ff'
            }
        }

     c. 设置坐标轴字体颜色和宽度,在xAxis或者yAxis中设置即可

        

    axisLine:{
                 lineStyle:{
                            color:'yellow',
                            2
                        }
             }

     d. 设置图形在页面出现的位置(一般处于中间)用于解决空间过小

       

    grid: {
             left: '3%',
             right: '4%',
             bottom: '3%',
             containLabel: true,
             y: 10 // 设置从y为10开始
        }

    e:设置y,x轴不显示

    xAxis: {
                show: false
         },
      yAxis: {
              show: false
            }

    f:y轴刻度线不显示,但是y轴字段显示

    yAxis: {
            axisTick:{
                        show:false
                    },
            axisLine:{
                        lineStyle:{
                            color:'#FF7B24',
                            0
                        }
                    }
        }

    h:设置tooltip提示框:

      formatter 函数可以格式化默认的显示,用户可以在里面实现自己的显示数据

    i: 设置折线图线条平滑,可以通过设置smooth:true 解决

      

    series : [
            {
                name:'邮件营销',
                type:'line',
                smooth:true,
                stack: '总量',
                areaStyle: {normal: {}},
                data:[120, 132, 101, 134, 90, 230, 210]
            }
           ]

    在echarts中没有设置颜色时,默认使用echarts中设置的颜色,但是有时需要根据业务需要对某些类型的数据设置固定的颜色,此时就需要对每个数据项设置所需的颜色 

    j: 饼图:给每个数据项设置颜色

       

    data:[
              {
                     value:335, 
                     name:'直接访问',
                     itemStyle:{
                            normal:{color:'gray'}
                       }
                }
            ]
  • 相关阅读:
    java基础 01
    c++11——模板的细节改进
    c++11——auto,decltype类型推导
    poj_1182 并查集
    poj_1988 并查集
    poj_1161 并查集
    poj_3067 树状数组
    poj_2182 线段树/树状数组
    poj_1190 树状数组
    动态规划
  • 原文地址:https://www.cnblogs.com/goddess/p/8145795.html
Copyright © 2020-2023  润新知