头痛了很久的Echarts绘图不显示问题终于解决了 |
您所在的位置：网站首页 › 3d画图不显示是什么原因 › 头痛了很久的Echarts绘图不显示问题终于解决了 |
头痛了很久的Echarts绘图不显示问题终于解决了
|
最近我在做一个小项目，需要绘制一个折线图。说干就干，我在echarts官网上找到折线图绘制的代码，放到了自己建的html文件中，环境以及需要的js文件也都准备好了，正当我满怀期待的希望看到折线图时，界面上竟然只显示了一个有底色的div框，于是刚接触前端可视化的我陷入了沉思，并开始尝试各种能想到的办法......还好最后问题解决啦！现将代码和效果图贴上。 一开始的代码： $(function () { echart_11(); function echart_11() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart_11')); var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600] option = { xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value' }, series:[ { type:'line', data:yDataArr } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }效果图：
经过一番折腾，尝试了各种方法之后，这个问题终于得以解决 正确的代码： function echart_11() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart_11')); var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600] option = { xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value' }, series:[ { type:'line', data:yDataArr } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); } echart_11();我想要的显示效果：
仅个人学习记录，如有不当之处，欢迎批评指正！！！ |
【本文地址】
今日新闻 |
推荐新闻 |