百度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   漫思  阅读(390)  评论(0编辑  收藏  举报

编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示