为什么代码在Echarts模拟器上可以显示但是在有数上无法显示?

答案:线上得模拟器是echarts5.0,而有数是echarts4,代码不兼容,建议是可以在代码处自行引入echarts5的库,这样就可以正常显示,”引入库”的代码案例如下:

  1. function renderChart() {
  2. let baseWidth;
  3. if (dataSet.length) {
  4. baseWidth = document.body.clientWidth - 116;
  5. }
  6. let datas = dataSet.map((d, index) => {
  7. return {
  8. id: d[0],
  9. val: d[1].toFixed(2),
  10. width: baseWidth * (index === 0 ? 1 : d[1]/dataSet[0][1])
  11. };
  12. });
  13. if (window.vueChart) {
  14. let len = window.vueChart.datas.length;
  15. window.vueChart.datas.splice(0, len, ...datas);
  16. }
  17. else {
  18. let tpl = `<ul class="chart">
  19. <li v-for="(item, index) in datas" class="bar-item" :key="item.id">
  20. <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>
  21. <div class="bar-axis">{{item.id}}</div>
  22. </li>
  23. </ul>`;
  24. let data = {
  25. datas
  26. };
  27. window.vueChart = new Vue({
  28. data,
  29. template: tpl,
  30. el: '#main'
  31. })
  32. }
  33. }
  34. if (!window.astLoaded) {
  35. let styleText = `
  36. body{font: 12px/1.14 "helvetica neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;}
  37. ul {list-style: none;padding:0;margin:0}
  38. .bar-info{display: flex;}
  39. .bar{margin-right:4px;height: 10px;border-radius: 5px;background-image: linear-gradient(to right, #dd8bb0 , #f6cbae);}
  40. .num{margin-right: 4px;width: 16px;color: #dd8bb0;}
  41. .label{width: 90px;overflow: hidden;color: #a5b4c8;}
  42. .bar-axis{margin: 6px 0 20px;color: #dd8bb0;text-indent: 20px;}
  43. `;
  44. let elem = document.createElement('style');
  45. elem.textContent = styleText;
  46. document.head.appendChild(elem);
  47. let s = document.createElement('script');
  48. s.onload = function () {
  49. window.astLoaded = true;
  50. document.head.removeChild(s);
  51. s.onload = null;
  52. renderChart();
  53. };
  54. s.src = 'https://ydcdn.nosdn.127.net/vue/2.6.14.js';
  55. document.head.appendChild(s);
  56. }
  57. else {
  58. renderChart();
  59. }