ecahrts使用整理（全）"/>
ecahrts使用整理（全）
ecahrts官方网站 .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, //动画效果默认truelabel: { //初始化数据label不显示show: false,position: 'center', },emphasis: { //鼠标悬浮圆环项上触发显示labellabel: {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'); // 获取父元素boxwindow.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'); // 图表divfunction 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轴样式改变–文本过长/数据多
转载
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;}}
}
效果图如下：
【饼图圆环图】样式设置
颜色渐变实现
.html
扇区之间增加间隔
代码设置如下： 设置series--> itemStyle的每个扇区样式
series: [{// XXXXX.....其它属性itemStyle: {borderWidth: 3,borderColor: '#fff',shadowBlur: 4, // 阴影大小shadowOffsetX: 0,shadowColor: '#fff', // 阴影颜色emphasis: { // 鼠标悬浮触发样式shadowBlur: 10,shadowOffsetX: 0,shadowColor: '#4E5D78',},},},],
效果如下：
折线样式设置
折线参考
legend 多列展示 和 legend 分页展示
.html
legend设置–数据对齐|百分比样式 //使用rich富文本标签和formatter函数
折线效果及以下下参考
- name名称呈现
- value数值呈现
- 计算出的数据百分比
- 样式每列对齐效果
将饼图数据和相应计算的百分比在legend中也展示，同时设置一下文字的样式，对齐方式，对齐方式是通过rich富文本设置每一项的宽度，就可以对齐了。当然要在formatter函数中拼接上去。
代码如下
先看legend --> textStyle --> rich的富文本设置
然后看legend --> formatter的书写语法
initHeaderAcross(myChart, dataList, isHas) {if (isHas) {myChart.setOption({// backgroundColor: '#2c343c',tooltip: {show: true, // 默认truetrigger: '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】
更多推荐
ecahrts使用整理（全）
发布评论