我将echarts写在element ui 的dialog内 在网页和苹果手机都能看到 但是在安卓上就只有轴线没有图
代码内容大致如下 求解决
<el-dialog :center="true" :title="popUpTitle" @open="ceshi()" :visible.sync="projectPopUpWindow" style="width: 100%;">
<div id="popUpChart" style="width: 50vw;height:50vh;"></div>
</el-dialog>
ceshi(){
this.$nextTick(() => {
alert(111)
this.popUpChart();
})
},
//弹窗报表
popUpChart() {
let myCharts = echarts.init(document.getElementById('popUpChart')); // 指定图表的配置项和数据
var _this = this;
var xAxis_data = _this.relatedDataName
var data_A = _this.relatedDataA
var data_C = _this.relatedDataC
alert(JSON.stringify(data_C));
var names = ['总分', '当前得分']
var color = ['#4D8EFF', '#FE9D9A']
var option = {
tooltip: {
trigger: 'axis',
formatter: function (params, ticket, callback) {
var htmlStr = '';
for (var i = 0; i < params.length; i++) {
var param = params[i];
var xName = param.name;//x轴的名称
var seriesName = param.seriesName;//图例名称
var value = param.value;//y轴值
var color = param.color;//图例颜色
if (i === 0) {
htmlStr += xName + '<br/>';//x轴的名称
}
htmlStr += '<div>';
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';//一个点
htmlStr += seriesName + '：' + value;//圆点后面显示的文本
htmlStr += '</div>';
}
return htmlStr;
}
},
grid: { //页边距
top: '20%',
left: '1%',
right: '1%',
bottom: '1%',
containLabel: true
},
legend: { // 图例
top: '5%',
// right:'20%',
data: names
},
xAxis: {
type: 'category',
data: xAxis_data,
axisLine: {//坐标线
lineStyle: {
type: 'solid',
color: '#E3E3E3', //轴线的颜色
width: '2' //坐标线的宽度
}
},
axisLabel: {
formatter: '{value}',
textStyle: {
fontSize: 8,
fontFamily: 'PingFang SC',
fontWeight: 400,
lineHeight: 17,
color: '#646464', //坐标值的具体的颜色
opacity: 1,
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
axisLine: {//线
show: false
},
axisTick: {//刻度
show: false
},
axisLabel: {
formatter: '{value}',
textStyle: {
fontSize: 12,
fontFamily: 'PingFang SC',
fontWeight: 400,
lineHeight: 17,
color: '#979A9F', //坐标值的具体的颜色
opacity: 1,
}
},
splitLine: {
lineStyle: {
type: 'dashed',
width: 2,
color: ['#E3E3E3'] //分割线的颜色
}
}
},
series: [
{
type: 'bar',
name: names[1],
data: data_A,
symbolSize: 9, //设置拐点大小
barWidth: 10,
itemStyle: {
normal: {
color: color[0], //设置颜色
lineStyle: {
width: 2,
type: 'solid' //'dotted'虚线 'solid'实线
}
}
}
}, {
type: 'line',
name: names[0],
data: data_C,
symbolSize: 9, //设置拐点大小
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#fe9d9a66' // 0% 处的颜色
}, {
offset: 1, color: '#fe9d9a00' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
color: color[2], //设置颜色
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'solid' //'dotted'虚线 'solid'实线
}
}
}
},
]
};
// 使用刚指定的配置项和数据显示图表。
myCharts.setOption(option, true);
// myCharts.setOption(option);
window.addEventListener("resize", function () { myCharts.resize(); });
},
会不会是android手机浏览器的问题呢？换个浏览器试试。
您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632
非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！
速戳参与调研>>>https://t.csdnimg.cn/Kf0y