为什么代码在Echarts模拟器上可以显示但是在有数上无法显示?
更新时间: 2021-07-27 16:12:26
阅读 2468
为什么代码在Echarts模拟器上可以显示但是在有数上无法显示?
答案:线上得模拟器是echarts5.0,而有数是echarts4,代码不兼容,建议是可以在代码处自行引入echarts5的库,这样就可以正常显示,”引入库”的代码案例如下:
function renderChart() {
let baseWidth;
if (dataSet.length) {
baseWidth = document.body.clientWidth - 116;
}
let datas = dataSet.map((d, index) => {
return {
id: d[0],
val: d[1].toFixed(2),
width: baseWidth * (index === 0 ? 1 : d[1]/dataSet[0][1])
};
});
if (window.vueChart) {
let len = window.vueChart.datas.length;
window.vueChart.datas.splice(0, len, ...datas);
}
else {
let tpl = `<ul class="chart">
<li v-for="(item, index) in datas" class="bar-item" :key="item.id">
<div class="bar-info"><div class="num">{{index+1}}</div><div class="bar" v-bind:style="{ width: item.width + 'px' }"></div><div class="label">{{item.val}} </div></div>
<div class="bar-axis">{{item.id}}</div>
</li>
</ul>`;
let data = {
datas
};
window.vueChart = new Vue({
data,
template: tpl,
el: '#main'
})
}
}
if (!window.astLoaded) {
let styleText = `
body{font: 12px/1.14 "helvetica neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;}
ul {list-style: none;padding:0;margin:0}
.bar-info{display: flex;}
.bar{margin-right:4px;height: 10px;border-radius: 5px;background-image: linear-gradient(to right, #dd8bb0 , #f6cbae);}
.num{margin-right: 4px;width: 16px;color: #dd8bb0;}
.label{width: 90px;overflow: hidden;color: #a5b4c8;}
.bar-axis{margin: 6px 0 20px;color: #dd8bb0;text-indent: 20px;}
`;
let elem = document.createElement('style');
elem.textContent = styleText;
document.head.appendChild(elem);
let s = document.createElement('script');
s.onload = function () {
window.astLoaded = true;
document.head.removeChild(s);
s.onload = null;
renderChart();
};
s.src = 'https://ydcdn.nosdn.127.net/vue/2.6.14.js';
document.head.appendChild(s);
}
else {
renderChart();
}
文档反馈
以上内容对您是否有帮助?