技术解析

Echarts笔记
0
2021-04-30 16:36:31
idczone

创建一个div:

<div id='main' style="width: 600px;height:400px;"></div>

JavaScript部分:

<script type='text/javascript'>
var charts=echarts.init(document.getElementById('main'));
var options={
   title:{
        text:'test'
   },
   tooltip:{
     trigger:'axis' //鼠标放上会显示相应y轴与x轴信息
   },
   xAxis:{
         //如果x轴与y轴不对齐,请增加boundaryGap:false此语句
         data:[1,2,3,4,5,232213,123123,4,32],
         axisLabel:{
             interval:0,  
             rotate:40
         } //避免x轴数据过长,导致显示不全问题
   },
   legend:{
         data:['test'] //这里显示的是图例
   },
   yAxis:{},
   series:[{
           data:[1,2,3,4,5,6,7,8,9], //这里为y轴数据
           type:'bar' //创建图的类型 bar为柱状图,line为折线图,pie为饼图
   }]
   charts.setOption(options)
}
</script>


数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服