echart的数据渲染问题及常见的图例样式修改：
我们的项目是wrj有关的项目，数据要求做到实时获取。包括红圈住的echart图标的数据，还有就是民用及警用tab切换的时候数据也需要刷新。
问题描述
例如：我先前以为是我的切换时没有调用echart图标数据的接口，一路log看接口是调了，但是数据还是没刷新，手动浏览器刷新才正常。最后我发现页面首次加载的时候，数据根本就没更新到最新的接口数据，还取得是data里面的数据。
原因分析：
我猜想的原因是，因为echart图标已经在和dom渲染的时候一起渲染了，数据自然就取得data里面的数据。就算接口返回把option的数据替换，他也不会自动渲染到图表中。
解决方案：
数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
computed:{
option(){
let data = this.dataList;
return {
intervalId:null,
legend: {
// selectedMode: false, //取消图例上的点击事件
top: 0,
right: -5,
orient: 'vertical',
height:'84px',//图例组件的高度
textStyle:{
color:'#fff',
},
itemHeight: 12,
itemWidth: 12,//图例标记的图形高度
itemGap:8,//图例每项之间的间隔
myChart:null,
data: [
{
name:'任务中',
// icon:`image://${imgUrl}`,//格式为'image://+icon文件地址'，其中image::后的//不能省略
icon:`image://${require('@/assets/img/echart/rwing.png')}` //格式为'image://+icon文件地址'，其中image::后的//不能省略
},
{
name:'已完成',
icon:`image://${require('@/assets/img/echart/rwed.png')}`
},
{
name:'未开始',
icon:`image://${require('@/assets/img/echart/rwwks.png')}`
},
{
name:'任务异常',
icon:`image://${require('@/assets/img/echart/rwyc.png')}`
}
],
formatter: function (name) {
let str;
for (let i=0;i<data.length;i++){
if (data[i].name==name){
str = name + ' ' + data[i].value
}
}
return str
}
},
series: [
{
name: 'Access From',
type: 'pie',
center:['35%','50%'],
radius: ['60%', '90%'],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: this.dataList
}
]
}
}
},
data中定义最初始的值
data() {
return {
dataList:[
{ value: 0, name: '未开始' },
{ value: 0, name: '已完成' },
{ value: 0, name: '任务中' },
{ value: 0, name: '任务异常' },
],
};
},
渲染是在切换tab的时候来渲染echart，watch监控tab项渲染
watch:{
titleValue(val){
if (val=='2'){
setTimeout(()=>{
this.initEchart()
},100)
}
},
//观察option的变化
option: {
//**解决不渲染的重点**
handler(newVal, oldVal) {
//数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
if (this.myChart) {
if (newVal) {
this.myChart.setOption(newVal);
} else {
this.myChart.setOption(oldVal);
}
} else {
this.initEchart();
}
},
deep: true //对象内部属性的监听，关键。
}
},
methods及html中
//html
<div class="t3" id="t3"></div>
methods: {
//初始化图表
initEchart(){
this.myChart = this.$echarts.init(document.getElementById('t3'));
this.myChart.setOption(this.option);
},
}
关于echart的option的补充说明：
① legend的图标替换如下面的data中定义的，可以用’image://url’ ,引入外部的图标。
图例之间的间距及宽度都可以调整
itemWidth: 12,//图例标记的图形高度
itemGap:8,//图例每项之间的间隔
②图例的字体颜色，一般都是如下
legend: {
textStyle:{
color:'#fff',
},
},
这样设置的就是图例的字体整体颜色，我们有个需求就是，图例名称是统一的颜色，但是图例数据需要多种颜色的配置，
在lengend 中通过formmatter函数配合textStyle中的属性rich富文本来格式化处理样式或者内容等
legend: {
textStyle:{
color:'#fff',
rich: {
rwing: {
color: '#3ADCAB',
},
rwed: {
color: '#1DD6FF',
},
rwwks: {
color: '#FFAD32',
},
rwyc: {
color: '#EC7C83',
},
}
},
},
formatter: function (name,id) {
let str,temp;
for (let i=0;i<data.length;i++){
if (data[i].name==name){
// str = name + ' ' + data[i].value
str=data[i].value
}
}
// return str
if (name=='任务中') {
temp="{name|" +name +"} {rwing|"+str+"}"
}else if(name=='已完成'){
temp="{name|" +name +"} {rwed|"+str+"}"
}else if(name=='未开始'){
temp="{name|" +name +"} {rwwks|"+str+"}"
}else if(name=='任务异常'){
temp="{name|" +name +"} {rwyc|"+str+"}"
}
return temp
}
设置完之后的页面就如一一一对应
option完整代码文章来源：https://www.toymoban.com/news/detail-756025.html
option(){
let data = this.dataList;
return {
legend: {
// selectedMode: false, //取消图例上的点击事件
top: 0,
right: -5,
orient: 'vertical',
height:'84px',//图例组件的高度
textStyle:{
color:'#fff',
rich: {
rwing: {
color: '#3ADCAB',
},
rwed: {
color: '#1DD6FF',
},
rwwks: {
color: '#FFAD32',
},
rwyc: {
color: '#EC7C83',
},
}
},
itemHeight: 12,
itemWidth: 12,//图例标记的图形高度(可根据icon的大小设置)
itemGap:8,//图例每项之间的间隔
myChart:null,
data: [
{
name:'任务中',
// icon:`image://${imgUrl}`,//格式为'image://+icon文件地址'，其中image::后的//不能省略
icon:`image://${require('@/assets/img/echart/rwing.png')}` //格式为'image://+icon文件地址'，其中image::后的//不能省略
},
{
name:'已完成',
icon:`image://${require('@/assets/img/echart/rwed.png')}`
},
{
name:'未开始',
icon:`image://${require('@/assets/img/echart/rwwks.png')}`
},
{
name:'任务异常',
icon:`image://${require('@/assets/img/echart/rwyc.png')}`
}
],
formatter: function (name,id) {
let str,temp;
for (let i=0;i<data.length;i++){
if (data[i].name==name){
// str = name + ' ' + data[i].value
str=data[i].value
}
}
// return str
if (name=='任务中') {
temp="{name|" +name +"} {rwing|"+str+"}"
}else if(name=='已完成'){
temp="{name|" +name +"} {rwed|"+str+"}"
}else if(name=='未开始'){
temp="{name|" +name +"} {rwwks|"+str+"}"
}else if(name=='任务异常'){
temp="{name|" +name +"} {rwyc|"+str+"}"
}
return temp
}
},
series: [
{
name: 'Access From',
type: 'pie',
center:['35%','50%'],
radius: ['60%', '90%'],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: this.dataList,
color: ['#FFAD32', '#1DD6FF','#3ADCAB','#EC7C83',],
}
]
}
}
对于图例字体颜色的设置还有一种方式就是，假如图例有一项是固定的，如下图
这样的就可以，在lengend 中配置data属性，data里面定义各图例的文本，以及该文本对应的样式文章来源地址https://www.toymoban.com/news/detail-756025.html
到了这里，关于echart的数据渲染，option不刷新问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
