echarts 不显示title和图例

发布于 2022-09-12 22:44:28 字数 3174 浏览 24 评论 0

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>ECharts</title>
     <!-- 引入 echarts.js -->
         <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js"></script>
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.0.2/echarts.simple.min.js"></script>
 </head>
 <body>
     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
     <div id="main" style="width: 600px;height:400px;"></div>
     <script type="text/javascript">
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('main'));
 

var names,datalist
$.getJSON("http://127.0.0.1:8080/echarts/echarts.html", function(evn) {
names = evn.sum;
datalist = evn.data;



         var option = {
             title: {
         show: true,           
        text: '展示',
        textStyle: {
          color: 'red'
        },
        borderWidth: 5,
        borderColor: 'blue',
        borderRadius: 5,
        left: 50,
        zlevel:1,  
        top: "top"
      },
    legend: {
        show:true,   
            top: 10,
            left: 'center',
            data: names
    },

    grid: {
        show:true,
        top: 70,
        bottom: 50
    },

     xAxis: {
        type: 'category',
        name:'date',
        nameTextStyle:{
        color:'#333'
        },
        boundaryGap : false
    },
    yAxis:{
        name:'rate',
        type: 'value',
        nameTextStyle:{
            color:'#333'
        }
    }, 
 
    series: [{
        name:names[0],

        data: datalist[0],
        type: 'line',
        smooth:true,
        connectNulls:true
       // barGap: 0
    },
    {
        name:names[1],

        data: datalist[1],
        type: 'line',
        smooth:true,
        connectNulls:true,
    }
    ]
};

 
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);

});
     </script>
 </body>
 </html>

``

为什么连标题和图例都不显示呢？
看起来没问题。
现结果

=======================================================
echarts读取的是一个静态的网页
其实就是json
为了应对跨域阻止而临时搭建的
内容是类似这样的
{"sum": ["dwjz", "jljz"], "data": [[["20121113", 1.0064], ["20121114", 1.0074], ["20121115", 1.0047], ["20121116", 0.9996], ["20121119", 0.996]],[["20121113", 3.0064], ["20121114", 3.0074], ["20121115", 3.0047], ["20121116", 2.9996], ["20121119", 2.996]]]}
我是感觉和问题没太大关联就没有写
毕竟标题和图例并不是太数据层的东西
整体数据都显示出来了
更像是哪里冲突了？

=======================================================
我发现是我电脑环境的问题？
同样的代码
echart折线图 -- 每条线分别对应不同x、y轴数据

人家的是这样的

我的是这样的

为什么会到我手里就变样？
我电脑win7 ,chrome firefox edge 都一样，没有浏览器差别......
我真的是醉了

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤寂小茶 2022-09-19 22:44:28

我用题主提供的代码在本地与官方示例环境下都试了一下，基本确定是引用的脚本的问题。

<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.0.2/echarts.simple.min.js"
></script>

换成 echarts.min.js 或是使用 echarts.simple.min.js + echarts.common.min.js 是可以达到题主预期效果的。

图片.png

顺便查找了一下官方的版本更新记录：

v5.0.0
aria 从 v5.0 开始不再包含在 dist/echarts.simple(.min).js 中。但它仍然包含在 dist/echarts.common(.min).js 和 dist/echarts(.min).js 中。
v3.8.0
dist/echarts/echarts.simple.js 中不再包含 echarts 上所挂载的工具方法。如果需要使用工具方法，可使用 dist/echarts/echarts.common.js 或者 dist/echarts/echarts.js，或者自定义构建。
对于 dataTool 的变化：使用 dist/echarts/echarts.simple.js 和 dist/echarts/echarts.common.js，和之前相同，须自行引入 dist/echarts/extension/dataTool.js，但是不会挂载成 echarts.dataTool。使用 dist/echarts/echarts.js 时，默认包含 echarts.dataTool。