前端使用Apache ECharts时，常用的配置项介绍

一、博主介绍

💒首页:水香木鱼

🛫专栏：ECharts

✍简介: 博主:花名 “水香木鱼”，星座"水瓶座一枚"

🔰 格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。

🔋 充电：相信付出终将会得到回报!

---

二、笔芯文章

本期为伙伴们带来的是echarts 图表的配置项与我们常用的小功能

以下为木鱼在开发中使用的图表代码模板：

了解echarts如何自定义主题色?(定制主题)

了解echarts如何做适配?

注意：这是一套通用的写法与图表适配，在开发中，使用代码模板，只需在option 属性中添加对应的图表即可。

  mounted() {
    this.myEcharts();
  },
  methods: {
    myEcharts() {
      var accessToElements = document.getElementById("fourConter"); //绑定元素
      var themeStyle = echarts.init(accessToElements, "test-chart-theme"); //定制主题
      //图表自适应配置
      const chartNode = new ResizeObserver(() => {
        themeStyle.resize();
      });
      chartNode.observe(accessToElements);
      // 绘制图表
      var option = {  
      
      //...图表的内容部分

	};
      option && themeStyle.setOption(option);
    },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

下面我们进入正文 👇

---

1.全局引用【适用于小型项目或者demo】

//main.js

//引入echarts
import * as echarts from 'echarts'
//挂载到vue原型上
Vue.prototype.$echarts=echarts
1
2
3
4
5
6

2.按需引用echarts的 正确写法：【大型项目适用】

//main.js文件

//引入vue实例
import Vue from 'vue'
// 引入基本模板
let echarts = require('echarts/lib/echarts')
 
// 引入柱状图组件,看需求引不同的组件
require('echarts/lib/chart/bar')
 
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
 
//挂载到vue原型对象上
Vue.prototype.$echarts = echarts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

一、配置项描述

• title:{}//标题组件
• tooltip:{},//提示框组件
• yAxis:[],//y轴
• xAxis:[],//x轴
• legend:{},//图例组件
• grid:{},//内绘网格
• toolbox:{},//工具
• series:[],//数据有关
• calculable:true//可计算特性

二、常用配置

(1)、x轴文字超出溢出隐藏

在 axisLabel属性中添加 formatter

限制params 文字的字数为6位【可根据需求自行调整字数】

formatter: function (params) {
	var val = "";
	if (params.length > 6) {
		val = params.substr(0, 6) + "...";
			return val;	
		} else {
		return params;
	}
},
1
2
3
4
5
6
7
8
9

(2)、x轴文字倾斜

在xAxis属性中，添加 axisLabel属性

• interval
• rotate

xAxis: {
	type: 'category',
	axisLabel: { interval: 0, rotate: 30 }
},
1
2
3
4

(3)、设置图表标题

在 option属性中添加 title

• title属性内设置text，为图表一级标题
• left 为标题的位置
• subtext 为图表二级标题

title: {
	text: "水香木鱼演示图表",
	subtext: "合同数量",
	left: "center",
},
1
2
3
4
5

(4)、饼图放大、缩小

在 series属性中，添加/调整radius属性 [0%~100%]

series:[
	{
		type: 'pie',
		radius: '60%',
	}
]
1
2
3
4
5
6

(5)、调整柱状图的间距

在series属性中，添加barWidth、barGap

series: [
	{
		type: "bar",
		barWidth: 20, // 表示柱图宽度
		barGap: 36, // 表示柱图之间的间距
	},
],
1
2
3
4
5
6
7

(6)、调整图例切换的位置

在option属性中，添加legend属性

• left 值为 right
• bottom 值为 bottom

  legend: {
    orient: 'vertical',
    bottom: 'bottom'
  },
1
2
3
4

(7)、调整图例的icon与宽度、位置

在option属性中添加legend

legend: {
	icon: 'circle',//圆形
	itemWidth: 8,//图标的宽度
	top: 'center',
    left: '85%',
    itemGap: 30,//为上下间距
},
1
2
3
4
5
6
7

(8)、饼图中间显示文字【调整字体大小】

在series属性中，添加label

• radius
• center
• label 【normal】关键代码

series:[
	{
		type: 'pie',
		radius: ['60%', '70%'],
		center: ['50%', '50%'],
		//关键代码
		label: {
			normal: {
				show: true,
				position: 'center',//将文字定位到饼图中心
				formatter: '{total|2000}\n{active|总数量}', //中心文字显示
				    //自定义的字体样式
					rich: { 
						total:{ 
							fontSize: 35,                   
						},
						active: { 
							fontSize: 16,
							lineHeight:30,             
						},          
				}             
			},       
		},   
	}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

---

---

三、博主致谢

感谢小伙伴们，耐心的阅读完本篇文章，关注👉 水香木鱼🔔 获取更多精彩文章！

⭐⭐⭐ 别忘记一键三连呦!