echarts 不显示title和图例

林欣涵
  • 24
<!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>
``

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

image.png

=======================================================
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轴数据

人家的是这样的
image.png

我的是这样的
image.png

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

回复
阅读 2.4k
1 个回答
✓ 已被采纳

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

<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).jsdist/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.jsdist/echarts/echarts.common.js,和之前相同,须自行引入 dist/echarts/extension/dataTool.js,但是不会挂载成 echarts.dataTool。使用 dist/echarts/echarts.js 时,默认包含 echarts.dataTool
宣传栏