ECharts-文字、格式、样式调整
（一）柱状相关
1.柱形图上方顶部显示vaule值（label）
图例
series: [
{
name: '业务量',
type: 'bar',
data: dataList,
itemStyle: {
normal: {
label: {
show: true, //关键点开启显示
position: 'right', //top上方;left左侧;right右方显示
// textStyle: { //数值样式
// color: 'black',
// fontSize: 12
// }
}
}
}
},
]
2.柱状图带阴影（非tooltip）
1.只有顶铺满
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true, //关键属性
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
2.柱状两侧阴影（顶不铺满）
实现代码
option = {
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
{
type: 'category',
show: false,//重点
data: ['Mon1', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: {
type: 'value'
},
series: [
{
data: [100, 200, 300, 400, 500],
barWidth: 20,//重点，控制柱子的粗细
type: 'bar'
},
{
xAxisIndex: 1,//当出现多个x轴时需要指定一个xAxis（0是第一个），看情况可加可不加，默认为0
itemStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
data: [100, 200, 300, 400, 500],
type: 'bar'
}
]
};
3.柱状两侧阴影（顶铺满）
const lineData = [100, 200, 300, 400, 500]
const max = lineData
.reduce((pre, cur) => pre > cur ? pre : cur, 0)
option = {
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
{
type: 'category',
show: false,//重点
data: ['Mon1', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: {
type: 'value'
},
series: [
{
data: lineData,
barWidth: 20,//重点，控制柱子的粗细
type: 'bar'
},
{
xAxisIndex: 1,//当出现多个x轴时需要指定一个xAxis（0是第一个），看情况可加可不加，默认为0
itemStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
data: lineData.map(() => max),
type: 'bar'
}
]
};
3 柱状圆角
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [50, 50, 0, 0]
}
}
}
]
};
4 柱状渐变
两种写法
方法一：color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{}，{}，{}])
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: '短信推送量',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'pink' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
])
}
]
};
方法二：避开new echarts，color: {x: 0, y: 0, x2: 0, y2: 1,colorStops: [{}，{}，{}]}
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
//showBackground: true,
backgroundStyle: {
// 背景色
color: 'rgba(180, 180, 180, 0.2)'
},
itemStyle: {
// 使用方法二的写法
color: {
type: 'linear',
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0,
color: 'pink' // 0% 处的颜色
},
{
offset: 0.7,
color: '#2378f7' // 70% 处的颜色
},
{
offset: 1,
color: '#83bff6' // 100% 处的颜色
}
]
}
},
}
]
};
（二）饼状相关
1.饼图-中间文字、图层含百分比
图例
就是弄几个一模一样的 对象，其中的 label 样式不同
知识点：模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
相关代码
series: [
//饼中央文字
{
name: '',
type: 'pie',
radius: ['40%', '83%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center',
normal: {
show: true,
position: 'center',
color: '#4c4a4a',
formatter: '{active|今日总业务量}' + '\n\r' + '{total|' + zywl + '}',
rich: {
total: {
fontSize: 35,
fontFamily: "微软雅黑",
color: '#454c5c'
},
active: {
fontFamily: "微软雅黑",
fontSize: 16,
color: '#6c7a89',
lineHeight: 30,
},
}
}
},
labelLine: {
show: false
},
data: dataList
},
//echarts饼图内部显示百分比设置
{
name: '',
type: 'pie',
radius: ['40%', '83%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label:{ //echarts饼图内部显示百分比设置
normal:{
show:true,
position:'inner', //标签的位置
textStyle : {
fontWeight : 300 ,
fontSize : 10 //文字的字体大小
},
formatter:'{d}%' //显示%
}
},
labelLine: {
show: false
},
data: dataList
},
//饼图图形上的文本标签
{
name: '',
type: 'pie',
radius: ['40%', '83%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
//饼图图形上的文本标签
show: true,
position: "outside", //outside 外部显示 inside 内部显示
formatter: '{b}:{c}',
color: "#151414", //颜色
fontSize: 12 //字体大小
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: dataList
}
]
2.饼状标签的视觉引导线(labelLine)和formatter 格式化 配置。
option = {
color: ['#2BEEA0', '#FEC300', '#1FA8F7'],
tooltip: {
//trigger: 'item'
},
legend: {
bottom: '5%',
textStyle: {
color: '#ffffff'
}
},
series: [
{
type: 'pie',
//startAngle:100, //起始角度
padAngle: 1,
itemStyle: {
borderRadius: 3
//borderColor: '#fff',
},
radius: ['40%', '70%'],
center: ['48%', '50%'],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
labelLine: {
normal: {
length: 15, // 改变标示线的长度
length2: 110,
lineStyle: {
color: 'white' // 改变标示线的颜色
}
}
},
//防止重叠
avoidLabelOverlap: true,
//防止显示不全
labelLayout: {
hideOverlap: false
},
label: {
//position: "outer",
textStyle: {
color: 'white' // 改变标示文字的颜色
//fontSize:18,//文字大小
},
//根据官方文档，可以通过formatter函数自定义返回内容。
//通过|自定义属性名字
//结合rich调整每个字符的样式。
//(示例一)文字内容上移操作
//formatter: '{b}\n{c}\xa0\xa0\xa0{d}%\n\n',
//(示例二)文字内容上移+rich样式操作
//formatter: '{name|{b}}\n{value|{c}}\xa0\xa0\xa0{value|{d}}%\n\n\n',
formatter: (params) => {
console.log(params);
//分别处理
let namez = params.data.name;
let valuez = params.data.value;
let percentz = params.percent;
if (namez == '第一产业') {
return '{name|' + namez +'}\n{value1|' + valuez +'}\xa0\xa0\xa0{value1|' + percentz +'}{value1|%}\n\n\n';
}else if(namez == '第二产业'){
return '{name|' + namez +'}\n{value2|' + valuez +'}\xa0\xa0\xa0{value2|' + percentz +'}{value2|%}\n\n\n';
}else{
return '{name|' + namez +'}\n{value3|' + valuez +'}\xa0\xa0\xa0{value3|' + percentz +'}{value3|%}\n\n\n';
}
},
//文字内容右移动操作
padding: [0, -110],
rich: {
name: {
//color: '#86909C',
fontSize: 12
//内边距上右下左
//lineHeight: 26
},
value1: {
color: '#2BEEA0',
fontSize: 14,
//lineHeight: 22
//内边距上右下左
padding: [8, 0, 8, 0]
},
value2: {
color: '#FEC300',
fontSize: 14,
//lineHeight: 22
//内边距上右下左
padding: [8, 0, 8, 0]
},
value3: {
color: '#1FA8F7',
fontSize: 14,
//lineHeight: 22
//内边距上右下左
padding: [8, 0, 8, 0]
},
percent: {
//color: '#1D2129',
fontSize: 14
//lineHeight: 22
}
}
},
data: [
{
value: 2785,
name: '第一产业'
},
{
value: 21113,
name: '第二产业'
},
{
value: 33053,
name: '第三产业'
}
]
}
]
};
3.
（三）折线图相关
1.取消折线点，折线点实心、折线点颜色
showSymbol: false, //隐藏折线点
折线点的样式就不会再显示了
option = {
legend: {
data: ['短信推送量'],
right: '18%',
textStyle: {
color: '#FB9601' //字体颜色
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: '短信推送量',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
showSymbol: false, //隐藏折线点
symbol: 'circle', //设定为实心点
symbolSize: 15, //设定实心点的大小
itemStyle: {
normal: {
color: '#FB9601', //改变折线点的颜色
borderColor: 'red', // 实心点下才起效，折线点的边框颜色
lineStyle: {
color: '#FB9601' //改变折线颜色
}
}
}
}
]
};
2.控制legend上隶属折线中的圈圈
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
//原来的写法
// legend: {
// data: ['Evaporation', 'Precipitation', 'Temperature']
// },
//变为数组分为两份,可以分开控制
legend: [
{
data: ['Evaporation', 'Precipitation']
},
{
itemHeight: 0, //把折线的圈圈去掉
right: '24%', //分为两部分以后，需要调整一下位置，避免重合
data: ['Temperature']
}
],
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: 'Precipitation',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: 'Temperature',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: 'Evaporation',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: 'Precipitation',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: 'Temperature',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
（三）鼠标滑动相关
1.鼠标滑动图表上面有显示（tooltip）
图例
title: {
text: '大厅业务办件情况',
subtext: '',
},
//提示框取默认值，即鼠标移动到柱状图会显示内容（关键点）
tooltip: {
trigger: 'item'
}
这里涉及一个“trigger”值（axis和item）的知识点，参考文档
【1】https://blog.csdn.net/qq_42462993/article/details/125296566 （注意这里讲的的柱状、折线图）
饼图不要用“axis”
//提示框取默认值，即鼠标移动到柱状图会显示内容
tooltip: {
trigger: 'axis',
//触发类型；轴触发，
//axis则鼠标hover到一条柱状图显示全部数据，
//item则鼠标hover到折线点显示相应数据，
axisPointer: { //坐标轴指示器，坐标轴触发有效，
type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
crossStyle: {
color: '#fff'
}
}
}
2. tooltip问题（鼠标触发显示）
tooltip：提示框
1.单对象内容过长(解决)
问题描述
正常示例图
问题示例图
解决方法
参考文献
【1】https://blog.csdn.net/xiaoxiannvh/article/details/126174412
【2】https://www.bbsmax.com/A/kmzLAGwNJG/
相关代码
tooltip: {
trigger: 'axis',
confine: true, // 限制tootip在容器内
appendToBody: true,//避免挡住轴内容
formatter:function (params) {
var newParamsName ='';
var title = '';
var titleLength = params[0].name.length;
var rowCount = 20;
var rowNumber = Math.ceil(titleLength / rowCount);
if(titleLength>rowCount){
for (var i = 0; i < rowNumber; i++) {
var tempStr = "";
var start = i * rowCount;
var end = start + rowCount;
if (i == rowNumber - 1) {
tempStr = params[0].name.substring(start, titleLength);
} else {
tempStr = params[0].name.substring(start, end) + "</br>";
}
newParamsName += tempStr;
}
}else {
newParamsName = params[0].name;
}
//返回小圆圈和后面的数量
return (newParamsName+"</br>"
+"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:"+params[0]['color']+"'></span>"+
+params[0]['value']);
},
},
效果
2.多对象内容过长(未尝试)
问题示例图
参考文献
【1】https://blog.csdn.net/qq_39364032/article/details/114651447
3.加不同单位
tooltip: {
trigger: 'axis',
formatter: function (params) {
var str = '';//声明一个变量用来存储数据
str += params[0].name +'</br>';
//图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位
for(var i=0; i<params.length; i++){
if(params[i].seriesName.indexOf("占比")!=-1){
str += params[i].marker+ params[i].seriesName +': '+ params[i].data + '%' +'</br>';
}else {
str += params[i].marker+ params[i].seriesName +': '+ params[i].data + '笔' +'</br>';
}
}
return str;
}
},
（四）布局调整相关
1.柱状图、折线图、饼图 布局调整（铺满 或者 上下左右）
参考文章
【1】https://www.cnblogs.com/kevinN/p/15173642.html
1.折线图和柱状图，通过grid属性调整。
铺满（让图表占满容器）
option = {
grid: {
// 让图表占满容器
top: '0px',
left: '0px',
right: '0px',
bottom: '0px',
containLabel: true //防止坐标轴溢出
},
}
上下左右移动：
grid:{
show:false,//设置为true后，可以看出这个像div的框
//其中数值可以是像素值，也可以是百分比,（百分比好一点）。
top:'20%',
right:'5%',
bottom:'10%',
left:'10%',
//containLabel这个参数可以防止坐标轴溢出，
//看你是自己调位置来保证图表的保证元素溢出，还是通过containLabel
//有时候不用containLabel:true，自己调整好一些
// containLabel:true,
},
其中数值可以是像素值，也可以是百分比（百分比好一点）。
2.饼图需要使用series中的center属性。
series: [
{
name:'名称',
type: 'pie',
radius: ['40%','70%']
center: ['30%','60%']//关键点
}]
（五）X、Y轴相关
1.加单位
1. 给y轴刻度加单位
yAxis: [
{
type: 'value',
axisLabel: {formatter: '{value} 单'},
}
]
2. 给y轴顶部设置单位
yAxis: [
{
//单位
name: '单',
type: 'value',
}
],
3. 给x轴添加单位
xAxis: [
{
name: '辆', //关键代码
nameTextStyle: { //关键代码,可调整位置
padding: [30, 0, 0, -30],
},
type: 'category',
data: ['优酷','公共','小程序'],
axisLabel: {
interval: 0,
rotate: 28,//倾斜度
},
axisTick: {
alignWithLabel: true
}
}
],
2.轴（刻度、文字、线）相关操作
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
// 轴刻度（false 时为关闭）
show: true
},
axisLabel: {
// 轴文字（false 时为关闭）
show: true
},
axisLine: {
// 轴线（false 时为关闭）
show: true
}
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
（六）legend 图例组件 排版相关
legend：图例组件
1.文字过长需”换行“、”省略“操作(解决)
（1）换行操作（俏皮做法）
该换行实现操作，是从布局着手，“卡墙”操作
title: {
top:'3%',
text: '电子证照应用分析',
},
tooltip: {
trigger: 'axis'
},
legend: {
// orient: 'vertical',//（vertical--垂直显示,horizontal--水平显示）
left: '60%',//按百分比左右浮动，遇到最边缘位置会酌情换行，按需调整百分比，我这边是60%
data: ['开通', '签发', '材料关联', '结果关联']
},
如下图
（2）换行操作
解决方法
参考文献
【1】https://blog.csdn.net/A20190518/article/details/115767734?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-4-115767734-blog-116131609.235v29pc_relevant_default_base3&spm=1001.2101.3001.4242.3&utm_relevant_index=7
相关代码（以下代码也可以用于”X“轴、”Y“轴的文字显示-换行操作）
legend: {
data: ['蒸发量', '降水量', '平均温度'],
formatter: function (params) {
//超过十个字符就换行展示
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 2;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";// 表示每一次截取的字符串
var start = p * provideNumber;// 开始截取的位置
var end = start + provideNumber;// 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
}else if(p >= 1){//(看需求)控制只能显示两行,后面的就直接省略号处理
tempStr = params.substring(start, end) + '...'
return newParamsName += tempStr;
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
},
省略操作
解决方法
相关代码
第一种方式：
legend: {
data: ['蒸发量', '降水量', '平均温度'],
formatter: function (name) {
return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
},
tooltip: {
show: true
}
},
第二种方式
legend: {
data: ['蒸发量', '降水量', '平均温度'],
formatter: function (value) { //关键代码
let res = value
if (res.length > 5) { //只显示前4位
res = res.substring(0, 4) + '..'
}
return res
},
tooltip: {
show: true
}
},
2.legend图例个数过多-实现多排、分页操作
一：实现”多排“操作
参考文献
【1】https://blog.csdn.net/liruiqing520/article/details/123256914
【2】https://www.freesion.com/article/8816953956/
关键点：
legend 变成List数组
图例一：（两排不需要对齐）
图例一：（两排需要对齐）
以上两种，看需求
就多了一个 样式配置
// 文字块背景色，一定要加上，否则对齐不会生效
backgroundColor: "transparent",
全代码：
option = {
tooltip: {
trigger: 'item'
},
legend:[
{
orient: 'horizontal',
icon: 'circle',
align: 'left',
bottom: '0',
itemWidth: 8,
itemHeight: 8,
y: '20',
x: 'center',
data: ['鼻翼煽动，口唇、指甲青紫', '胸闷', '憋气/憋醒'],
formatter: (name): any => {
return `{b|${name}} `;
},
textStyle: {
color: '#999999',
fontSize: 12,
align: 'left',
// 文字块背景色，一定要加上，否则对齐不会生效
backgroundColor: "transparent",
rich: {
b: {
width: 200,
},
},
},
},
{
orient: 'horizontal',
icon: 'circle',
align: 'left',
bottom: '0',
itemWidth: 8,
itemHeight: 8,
y: '40',
x: 'center',
data: ['咳嗽或反复咳嗽', '气促', '没感觉/感觉良好'],
formatter: (name): any => {
return `{a|${name}} `;
},
textStyle: {
color: '#999999',
fontSize: 12,
align: 'left',
// 文字块背景色，一定要加上，否则对齐不会生效
backgroundColor: "transparent",
rich: {
a: {
width: 200,
},
},
},
}
],
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: '咳嗽或反复咳嗽' },
{ value: 735, name: '鼻翼煽动，口唇、指甲青紫' },
{ value: 580, name: '胸闷' },
{ value: 484, name: '憋气/憋醒' },
{ value: 300, name: '气促' },
{ value: 300, name: '没感觉/感觉良好' }
]
}
]
};
简单一点的就直接
legend: [{
data: ['鼻翼煽动，口唇、指甲青紫', '胸闷', '憋气/憋醒',],
icon: "roundRect",
x:'center',
y:'0%'
},{
data: ['咳嗽或反复咳嗽', '气促', '没感觉/感觉良好',],
icon: "roundRect",
x:'center',
y:'7%'
}],
一：实现”分页“操作 （未尝试）
参考文献
【1】https://www.wanjunshijie.com/note/echarts/4983.html
【2】https://www.cnblogs.com/jindao3691/p/16093592.html
（七）模版变量 {a}, {b}, {c}, {d} 的含义
模版变量 {a}, {b}, {c}, {d} 在不同图表类型下代表数据含义为：
- 折线（区域）图、柱状（条形）图、K 线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
- 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
- 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
- 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
（八）Echarts 主题化，统一风格
参考文献
【1】https://blog.csdn.net/m0_62064241/article/details/122520970?spm=1001.2014.3001.5506
步骤
json文件，需先注册主题（假设主题名称是 “vintage”）
$.getJSON(‘xxx/xxx/vintage.json’, function(themeJSON) {
echarts.registerTheme(‘vintage’, themeJSON);//需要注册
var chart = echarts.init(dom, ‘westeros’);
});
js文件，引入vintage.js文件后，可直接使用
var chart = echarts.init(dom, ‘westeros’);
一般来说用的是js版本的，下载好以后放入项目，并且引用(import ‘@/api/westeros’;)就可以用了
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
