百度echarts样式开发

Echarts如何进行实例化

var a1 = null;
a1=  echarts.init(document.getElementById('a1'));
           a1.setOption({
               color: ['#01a5e8'],
               tooltip: {
                   trigger: 'axis',
                   axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                       type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                   }
               },
               grid: {
                   left: '3%',
                   right: '4%',
                   bottom: '3%',
                   containLabel: true,
                   top:"3%"
               },
               xAxis: [
                   {
                       type: 'category',
                       data: ['pe0/1','pe0/2','pe0/3','pe0/4','pe0/5'],
                       axisTick: {
                           alignWithLabel: true
                       }
                   }
               ],
               yAxis: [
                   {
                       type: 'value'
                   }
               ],
               series: [
                   {
                       name: '巡检服务器数',
                       type: 'bar',
                       barWidth: '20',
                       data: [390, 334, 300,210, 200 ],
                     
                   }
               ]
           });

刷新数据

//更新数据
      var option = myChart.getOption();
      option.series[0].data = data;   
      myChart.setOption(option);    

 Echarts中,控制图表在父窗体中的饱满程度。(这个非常重要,因为这个最常用)。但是通常理解为Echarts的bug。之前在老郭的平台中就遇到过这些问题,结果经历了长时间的技术沉淀终于解决了这些问题。

grid: {  
 left: '3%',  
 right: '4%',  
 bottom: '3%',  
 containLabel: true,  
 top:"3%"  
 },  

 

x轴线
axisLabel: {
                         
                        rotate:45,
                        textStyle: {
                            color: '#fff',
                            fontSize: 14
                        }
                    }



y轴
axisLabel: {
                         
                        rotate:45,
                        textStyle: {
                            color: '#fff',
                            fontSize: 14
                        }
                    }


在legend上加
  textStyle:{color:'#fff',

fontSize:16

}

在条目上加


 label: {
                normal: {
                    show: true,
                    position: 'top',
                    textStyle:{color:'#c3c3c3',fontSize:"16"},
                }
            }



 textStyle:{color:'#c3c3c3',fontSize:"16"},

 Echarts更多的问题总结。

如何多张图共用一张图例。多张图进行合并。

 

posted on 2017-07-29 16:53  漫思  阅读(389)  评论(0编辑  收藏  举报

导航