echarts自定义样式

迷南。 2022-12-15 03:39 288阅读 0赞

一、柱状图x、y轴：

（1）实现隐藏x轴，y轴，刻度线，网格

yAxis: {
    	show: true,
    	type: 'value',
    	splitLine:{show: false},   //去除网格线
    	nameTextStyle:{
    		color:'#abb8ce'
    	},
    	 axisLabel: {
                interval: 0,
                show: true,
                textStyle: {
                  fontSize: 12,
                  color: '#787878'
                }
          },
         axisTick: {
                //y轴刻度线
                show: false
          },
          axisLine: {
                //y轴
                show: false
         }
     }
    },

（2）样式：

axisLabel: {
    formatter: '{value} %',
                interval: 0,
                show: true,
                textStyle: {
                  fontSize: 8,
                  color: '#787878'
                }
              },

二、 label重叠问题：series中avoidLabelOverlap改为 true就不会重叠。

三、自定义提示文字：formatter函数

1、自定义tooltip提示框：参数为params，例：

data() {
        return {
          chart: null,
          cityName: '',
          dataMap: { 青海: '青海哈哈哈', 西藏: '数据' },
          mapOption: {
            backgroundColor: '#FFFFFF',
    
            tooltip: {
              trigger: 'item',
              formatter: params => {
                return this.dataMap[params.name];
              }
            },
            grid: {
              x: 40,
              x2: 40,
              y: 25,
              height: 170
            },
            //左侧小导航图标
            visualMap: {
              show: true,
              x: 'left',
              y: 'bottom',
              itemWidth: 10, //图形的宽度，即长条的宽度。
              itemHeight: 10, //图形的高度，即长条的高度。
              splitList: [
                { start: 500, end: 600 },
                { start: 400, end: 500 },
                { start: 300, end: 400 },
                { start: 200, end: 300 },
                { start: 100, end: 200 },
                { start: 0, end: 100 }
              ],
              color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
            },
    
            //配置属性
            series: [
              {
                name: '数据',
                type: 'map',
                mapType: 'china',
                roam: true,
                zoom: 1.25,//地图放大1.25倍
                label: {
                  normal: {
                    show: true //省份名称
                  },
                  emphasis: {
                    show: false
                  }
                },
                data: [
                  { name: '新疆', value: 10 },
                  { name: '北京', value: Math.round(Math.random() * 500) },
                  { name: '天津', value: Math.round(Math.random() * 500) },
                  { name: '上海', value: Math.round(Math.random() * 500) },
                  { name: '重庆', value: Math.round(Math.random() * 500) },
                  { name: '河北', value: Math.round(Math.random() * 500) },
                  { name: '河南', value: Math.round(Math.random() * 500) },
                  { name: '云南', value: Math.round(Math.random() * 500) },
                  { name: '辽宁', value: Math.round(Math.random() * 500) },
                  { name: '黑龙江', value: Math.round(Math.random() * 500) },
                  { name: '湖南', value: Math.round(Math.random() * 500) },
                  { name: '安徽', value: Math.round(Math.random() * 500) },
                  { name: '山东', value: Math.round(Math.random() * 500) },
    
                  { name: '江苏', value: Math.round(Math.random() * 500) },
                  { name: '浙江', value: Math.round(Math.random() * 500) },
                  { name: '江西', value: Math.round(Math.random() * 500) },
                  { name: '湖北', value: Math.round(Math.random() * 500) },
                  { name: '广西', value: Math.round(Math.random() * 500) },
                  { name: '甘肃', value: Math.round(Math.random() * 500) },
                  { name: '山西', value: Math.round(Math.random() * 500) },
                  { name: '内蒙古', value: Math.round(Math.random() * 500) },
                  { name: '陕西', value: Math.round(Math.random() * 500) },
                  { name: '吉林', value: Math.round(Math.random() * 500) },
                  { name: '福建', value: Math.round(Math.random() * 500) },
                  { name: '贵州', value: Math.round(Math.random() * 500) },
                  { name: '广东', value: Math.round(Math.random() * 500) },
                  { name: '青海', value: Math.round(Math.random() * 500) },
                  { name: '西藏', value: Math.round(Math.random() * 500) },
                  { name: '四川', value: Math.round(Math.random() * 500) },
                  { name: '宁夏', value: Math.round(Math.random() * 500) },
                  { name: '海南', value: Math.round(Math.random() * 500) },
                  { name: '台湾', value: Math.round(Math.random() * 500) },
                  { name: '香港', value: Math.round(Math.random() * 500) },
                  { name: '澳门', value: Math.round(Math.random() * 500) }
                ] 
              }
            ]
          }
        };
      },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70][]

注：在tooltip的formatter中，换行符是<br/>，在label中换行符是\\n

2、legend图例自定义内容：参数为name：

legend: {
              orient: 'vertical',
              left: 0,
              itemWidth: 5,
              itemHeight: 5,
              textStyle: {
                fontSize: 10
              },
              formatter: name => {
                let option = this.userMap[name];
                if (option) {
                  let label= option.label;
                  return label;
                }
                return '';
              }
            },

3、 series的label自定义显示文字：参数为params。

四、改变item的颜色：

（1）改变所有item为一种颜色：在series下修改，如柱状图修改柱形为红色：

series: [
              {
                data: [],
                type: 'bar',
                showBackground: true,
                itemStyle: {
                  normal: {
                    color: 'red'
                  }
                },
                backgroundStyle: {
                  color: 'rgba(220, 220, 220, 0.8)'
                }
              }
            ]
          },

（2）改变单个item的颜色：如饼图给每个item指定颜色

1）方法一：option下加color属性，类型为字符串数组，例：

{
       color: ['#D3D3D3', '#558ED5'],
       tooltip: {
              trigger: 'item',
              formatter: '{b}, {c}, {d}%'
        }
    }

2）方法二：在data上添加，例：

data: [
    						{ value: 12, name: '在线', itemStyle: { color: '#005eff' } },
    						{ value: 3, name: '离线', itemStyle: { color: '#ff9194' } },
    
    					]

五、柱状图上方显示数值：series下加itemStyle属性：

series: [{
    						"name": "销量",
    						"type": "bar",
    						"data": [5, 20, 40, 10, 10, 20],
    						itemStyle: {
    							normal: {
    								label: {
    									show: true, //开启显示
    									position: 'top', //在上方显示
    									textStyle: { //数值样式
    										color: 'black',
    										fontSize: 16
    									}
    								}
    							}
    						},
    					}]

六、图形改变大小和位置：

1、饼图：

修改radius属性可以放缩图片，修改series的center值 可以调整位置：center: \['50%', '50%'\],第一个值调整左右距离，第二个值调整上下距离，50、50在div的正中间。

2、折线图、柱状图：通过 grid 属性来控制直角坐标系内绘图网格四周边框位置，具体有如下配置项：

*  x：直角坐标系内绘图网格与左侧距离，数值单位 px，支持百分比（字符串），如：50%
 *  x2：直角坐标系内绘图网格与右侧距离，数值单位 px，支持百分比（字符串），如：50%
 *  y：直角坐标系内绘图网格与顶部距离，数值单位 px，支持百分比（字符串），如：50%
 *  y2：直角坐标系内绘图网格与底部距离，数值单位 px，支持百分比（字符串），如：50%

如：

grid: {
              left: '3%',
              top: '25%',
              right: '3%',
              bottom: '3%'
            },

3、柱状图大小放缩：

dataZoom:{
    					orient:"vertical", //水平显示
    					show:true, //显示滚动条
    					start:0, //起始值为20%
    					end:100,  //结束值为60%
    				},

柱状图粗细：写在series中

barWidth : 20,

4、地图：series中的zoom可以放缩地图，如：

zoom: 1.25,//地图放大1.25倍

5、饼图引导线大小修改：series下：length指线的长度，length2指线的宽度

labelLine: {
                  show: true,
                  length: 10,
                  length2: 10
                },

七：折线图堆叠，多条折线的纵坐标与真实值不符问题：如

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 1][]

解决方法：删除series:\[\] 里面的 stack: ‘总量’。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70]: /images/20221123/83508c07381a47878376ad94c64b2270.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 1]: /images/20221123/0cbfc01abd2a4fff859cd893c95ad992.png