百度echarts样式开发

攻城狮邦安技术 2022年11月14日

0 收藏 919 点赞 2,477 浏览 1054 个字

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:,
                        textStyle: {
                            color: '#fff',
                            fontSize:
                        }
                    }y轴
axisLabel: {                        rotate:,
                        textStyle: {
                            color: '#fff',
                            fontSize:
                        }
                    }在legend上加
  textStyle:{color:'#fff',fontSize:}在条目上加 label: {
                normal: {
                    show: true,
                    position: 'top',
                    textStyle:{color:'#c3c3c3',fontSize:""},
                }
            } textStyle:{color:'#c3c3c3',fontSize:""},