echarts 不显示title和图例_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>ECharts</title>
     <!-- 引入 echarts.js -->
         <script src="/uploads/allimg/210420/2101014T8-0.jpg"></script>
                <script type="text/javascript" src="/uploads/allimg/210420/2101014259-1.jpg"></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 都一样，没有浏览器差别......
我真的是醉了

###

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

<script
  type="text/javascript"
  src="/uploads/allimg/210420/2101014259-1.jpg"
></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。