ecahrts官方网站 https://echarts.apache.org/zh/index.html
formatter模板变量abcd值
formatter: '{a} <br/>{b} : {c} ({d}%)',
//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
数据tooltip、label、emphasis悬浮触发显示设置等
//以下label设置可覆盖此处设置
tooltip: {
show: true, //默认true
trigger: 'item', //鼠标悬浮圆环项上触发显示
formatter: '{d}%\n{b}', //显示值
},
tooltip设置的项类似于以下 series--> label 设置的项
position: 'center' 只可在series--> label中设置
series--> emphasis n.强调； Echarts中的 emphasis属性
series: [ // 数据设置项
{
name: '数据',
type: 'pie',
radius: ['68%', '82%'], // 图表形状
center: ['25%', '50%'], // 图表位置
avoidLabelOverlap: false, //是否启用防止标签重叠策略
hoverAnimation: true, //动画效果默认true
label: { //初始化数据label不显示
show: false,
position: 'center',
},
emphasis: { //鼠标悬浮圆环项上触发显示label
label: {
show: true,
fontSize: '18',
color: '#8A95A9',
formatter: '{fs20|{b}}\n{c} ({d}%)',
rich: {
fs20: {
color: '#4E5D78',
fontSize: 24,
fontWeight: 'bolder',
padding: [0, 0, 8, 0],
},
},
},
},
labelLine: { show: false },
data: dataList,
},
],
echarts图表–宽高变化自适应
为图表设置特定的大小
myChart.resize({
width: 800,
height: 400
});
监听自适应
a. 在 HTML 中定义div，及id="header_act_echart"父元素
<div id="header_act_echart" class="header-act-echart">
<div>总活动图表</div>
<!-- 未设置宽度/宽度自适应-->
<div id="activity_by_date_num" style="height: 124px;"></div>
</div>
b. 获取动态父元素宽赋值给echarts的div宽度；
window.onresize 事件监听页面 获取浏览器大小改变的事件；
然后调用.resize()改变图表的大小；
<script>
import * as echarts from 'echarts';
export default {
created() {
this.activityByDataNumECharts = echarts.init(document.getElementById('activity_by_date_num'));
this.initLineChart(
this.activityByDataNumECharts,
this.activity_by_date_x, this.activity_by_date_y, // date数据
this.has_activity_by_date, // 是否有数据
);
},
mounted() {
// 监听获取浏览器大小，调用.resize()改变图表大小
const chartBox = document.getElementById('header_act_echart'); // 获取父元素box
window.onresize = () => {
this.chartssize(chartBox);
};
},
beforeUpdate() {
// 第一次进页面获取宽度设置
const chartBox = document.getElementById('header_act_echart');
this.chartssize(chartBox);
},
methods: {
initLineChart(myChart, xdata, ydata, isHas) {
if (isHas) {
myChart.setOption({//xxx});
}
},
chartssize(container) {
const myChart = document.getElementById('activity_by_date_num'); // 图表div
function getStyle(el, name) { // 获取样式方法
if (window.getComputedStyle) {
return window.getComputedStyle(el, name);
}
return el.currentStyle;
}
const wi = getStyle(container, 'width').width;
myChart.style.width = wi; // 设置图表div宽度=父元素宽度
if (this.activityByDataNumECharts) {
this.activityByDataNumECharts.resize();
}
},
},
</script>
X轴样式改变–文本过长/数据多
转载https://blog.csdn.net/weixin_43299180/article/details/119671336
Echarts 默认的配置是 X 轴刻度太多时回默认隐藏一部分，其他的正常显示。如下图：
xAxis: [
{
type: 'category',
data: ['2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15', '2021-01-16', '2021-01-17', '2021-01-18', '2021-01-19', '2021-01-20', '2021-01-21', '2021-01-22']
}
],
如上图所示，data 数据多而且每一项内容也长，这个时候 Echarts 会自动隐藏中级的刻度，鼠标移入的时候在显示出来，从而让整个 X 轴刻度正常展示。
方法一：刻度内容倾斜
修改 xAxis.axisLabel 的属性
xAxis:[{
axisLabel: {
interval: 0, //控制X轴刻度全部显示
rotate: 310, //倾斜角度
color: '#8E98A9',
fontSize: '12px',
},
}]
效果图如下：
由于倾斜之后会需要占用很多 Echarts 下面的空间，所以建议对表格下边距进行调整，xAxis 同级添加 grid 配置。
grid:{//直角坐标系内绘图网格
show:true,//是否显示直角坐标系网格。[ default: false ]
borderColor:"#c45455",//网格的边框颜色
left:"2%",//grid组件离容器左侧的距离。
right: '10%',
bottom: '3%',
},
方法二、刻度内容垂直展示
需要调节 axisLabel 对象里面的 formatter 方法，给文字直接添加换行符 \n
axisLabel: {
interval: 0,
formatter:function(value){
return value.split("").join("\n");
}
}
效果图如下:
方法三、刻度内容换行
跟方法二差不多，让刻度内容在特定长度拼接 \n 让其换行
axisLabel: {
interval: 0,
formatter:function(value){
let len = value.length; // X轴类目项的文字个数
let maxLength = 4; //每行显示文字个数，自定义
let num = Math.ceil(len/maxLength);//循环次数、换行的行数
if(num > 1){
let str = '';
for(let i = 0;i<num;i++){
str += value.substring(i*maxLength,(i+1)*maxLength) + '\n';
}
return str;
}else{
return value;
}
}
}
先根据内容长度和限制长度获取循环次数，然后提取出需要换行的内容拼接上 ‘\n’。
方法四、刻度间隔换行
配合 index 参数使用，index为偶数的刻度拼接 \n\n 让刻度换行
axisLabel: {
interval: 0,
formatter:function(value,index){
if(index % 2 != 0){
return '\n\n' + value;
}else{
return value;
}
}
}
效果图如下：
【饼图圆环图】样式设置
颜色渐变实现
https://jingyan.baidu.com/article/7082dc1c5d4d23a50b89bdd0.html
扇区之间增加间隔
代码设置如下： 设置series--> itemStyle的每个扇区样式
series: [
{
// XXXXX.....其它属性
itemStyle: {
borderWidth: 3,
borderColor: '#fff',
shadowBlur: 4, // 阴影大小
shadowOffsetX: 0,
shadowColor: '#fff', // 阴影颜色
emphasis: { // 鼠标悬浮触发样式
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: '#4E5D78',
},
},
},
],
效果如下：
折线样式设置
折线参考https://blog.csdn.net/qq_45101496/article/details/102600342
legend 多列展示 和 legend 分页展示
https://www.cnblogs.com/jindao3691/p/16093592.html
legend设置–数据对齐|百分比样式 //使用rich富文本标签和formatter函数
折线效果及以下下参考https://zhuanlan.zhihu.com/p/391730512
- name名称呈现
- value数值呈现
- 计算出的数据百分比
- 样式每列对齐效果
将饼图数据和相应计算的百分比在legend中也展示，同时设置一下文字的样式，对齐方式，对齐方式是通过rich富文本设置每一项的宽度，就可以对齐了。当然要在formatter函数中拼接上去。
代码如下
先看legend --> textStyle --> rich的富文本设置
然后看legend --> formatter的书写语法
initHeaderAcross(myChart, dataList, isHas) {
if (isHas) {
myChart.setOption({
// backgroundColor: '#2c343c',
tooltip: {
show: true, // 默认true
trigger: 'item', // 鼠标悬浮圆环项上触发显示，
formatter: '{d}%\n{b}', // 百分比
},
// 图例组件
legend: [
{
// x: 'right',
left: '48%',
y: 'center',
orient: 'vertical', // 图项的显示方式，垂直
icon: 'circle',
itemHeight: 9, // 修改圆形小图标的大小
align: 'left',
textStyle: {
fontSize: 42, // 可控制每个legend项的间距
color: '#8A95A9',
padding: [0, 0, 0, 0], // 修改文字和图标距离
rich: {
// 通过富文本rich给每个项设置样式，下面的a、b、c可以理解为"每一列"的样式
a: {
width: 82,
color: '#8A95A9',
fontSize: 18,
},
b: {
width: 52,
color: '#4E5D78',
fontSize: 24,
fontWeight: 'bolder',
},
c: {
color: '#4E5D78',
fontSize: 24,
fontWeight: 'bolder',
},
},
},
formatter: (name) => {
let total = 0; // 总数
let target; // 遍历的value数据
for (let i = 0; i < dataList.length; i++) {
total += dataList[i].value;
if (dataList[i].name === name) {
target = dataList[i].value;
}
}
const v = ((target / total) * 100).toFixed(2);
return `{a|${name}} {b|${target}} {c|${v}%}`;
// 第一列a样式 第二列b样式 第三列c样式
},
data: dataList.slice(0, 6),
},
],
// 控制圆环图的颜色
color: ['#AC8FFF', '#679CFF', '#75CDFF', '#E28FFA', '#FF95D1', '#FFBD80', '#FFA37B', '#FFB4A4', '#FF9F9F'],
// 配置环形图的显示与数据
series: [
{
name: '数据',
type: 'pie',
radius: ['68%', '82%'], // 图表形状
center: ['25%', '50%'], // 图表位置
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
formatter: '{d}%', // 显示百分比/ {d}%\n{b}
},
emphasis: {
label: {
show: true,
fontSize: '24',
fontWeight: 'bold',
},
},
labelLine: { show: false }, // 是否展示延展线
data: dataList, // 图表数据，一般为发请求获取的后台数据
},
],
});
}
},
特别注意：【样式111】
4909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
