echarts自定义样式

最新推荐文章于 2025-01-12 14:30:58 发布

w_t_y_y

最新推荐文章于 2025-01-12 14:30:58 发布

阅读量3.2k

点赞数 2

分类专栏： # VUE页面开发

本文链接：https://blog.youkuaiyun.com/w_t_y_y/article/details/109093747

版权

VUE页面开发专栏收录该内容

26 篇文章

订阅专栏

一、柱状图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) }
            ] 
          }
        ]
      }
    };
  },

注：在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
            },

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

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