1. 程式人生 > >ECharts座標軸是否顯示和修改顯示顏色改變字型顏色

ECharts座標軸是否顯示和修改顯示顏色改變字型顏色


var  myChart = echarts.init(document.getElementById('box'));
option = {
            color: ['#3398DB'],
             title: {
                text: '總收益',
                x:'center',
                top:'2%',
            },               
            //  在座標軸上顯示資料
            label:{
                normal:{
                    show: true,
                    textStyle:{color:'#d27d39',fontSize:"18"},
                    position: 'top'
                },                
            },    
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 座標軸指示器,座標軸觸發有效
                    type : 'line'        // 預設為直線,可選為:'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['1/30', '1/31', '2/1', '2/2', '2/3'],
                    axisTick: {
                        alignWithLabel: true
                    },                        
                    // 控制網格線是否顯示
                    splitLine: {
                            show: false,
                            //  改變軸線顏色
                            lineStyle: {
                                // 使用深淺的間隔色
                                color: ['red']
                            }                            
                    },
                    //  改變x軸顏色
                    axisLine:{
                        lineStyle:{
                            color:'#df0af8',
//                            width:8,//這裡是為了突出顯示加上的,可以去掉
                        }
                    },                         
                    //  改變x軸字型顏色和大小
                    axisLabel: {
                        textStyle: {
                            color: '#21abfa',
                            fontSize:'16'
                        },
                    },                        
                }
            ],
            yAxis : [
                {
                    //  隱藏y軸
                    axisLine: {show: false},
                    // 去除y軸上的刻度線
                    axisTick: {
                            show: false
                    },                    
                    // 控制網格線是否顯示
                    splitLine: {
                            show: true,
                            //  改變軸線顏色
                            lineStyle: {
                                // 使用深淺的間隔色
                                color: ['red']
                            }                            
                    },
                    //  改變y軸字型顏色和大小
                    axisLabel: {
                        textStyle: {
                            color: '#ef4c13',
                            fontSize:'16'
                        },
                    },                    
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'總收益',
                    type:'bar',
                    barWidth:'30%',  //  調節柱形圖寬度的大小
                    itemStyle:{
                            normal:{
                                color:'#4e76b5'
                            },
                        },            
                    data:[10, 52, 200, 334, 390]
                }
            ]
};

 myChart.setOption(option);


相關推薦

ECharts座標軸是否顯示修改顯示顏色改變字型顏色

var  myChart = echarts.init(document.getElementById('box')); option = {             color: ['#3398DB'],              title: {           

Ubuntu如何手工顯示修改時間

顯示命令用 timedatectl status 修改命令為 sudo date $mouth$day$hour$min$year.$second 如: 現在時間為2018年10月19日11時55分36秒, 則命令如下: sudo date 101911552018.36   這個時

C#中使用DateTimePicker控制元件顯示修改日期時間

    在Winform程式有一個DateTimePicker控制元件,這個控制元件是用來顯示和修改日期時間的,但預設只顯示日期和修改日期。若要顯示和修改時間,則要自定義設定,方法如下:     在Winform程式新增一個DateTimePicker控制元件,命名為dtpT

Qt中使用Qss修改邊框寬度,字型顏色修改選擇時背景色字型顏色

以Dialog為例 setStyleSheet("QDialog {border: 1px solid #CCCCCC;}"); 以LineEdit為例 setStyleSheet("color:white"); 以日曆為例 setStyleSheet(

密碼框的明密文(顯示隱藏) 顯示

最近在寫一個新的專案,從頭開始寫,所以就要從註冊登入開始做起.以前寫登入註冊模組的時候,無外乎給input框一個type=”password”就可以了,近期因為要涉及到顯示隱藏狀態的切換. 樣式程式碼如下: 注: 1.樣式展示(): <

struts2 vallidate驗證表單提交修改樣式——刪除li標籤原點、取消換行、改變字型顏色

老師佈置實現的一個小效果,不容小覷! 預定成功顯示頁面  預定報錯顯示頁面  從圖片可以看出需要實現報錯提示換行以及字型顏色更改的需求。 網上有很多方法,這裡介紹兩種親測可用的吧: 修改struts2-core-x.x.x.jar

關於android自定義字型顏色點選改變字型顏色

先看效果圖 上面的為點選按下的效果圖 上面的為預設的(鬆開按鈕)的效果圖 首先我們先在values資料夾下新建一個color.xml檔案 這檔案就是配置我們要使用的顏色 程式碼如下 <?xml version="1.0" encoding

eclipse修改tomcat啟動控制檯字型顏色

(1) 1、使用eclipse-jee-juno中tomcat啟動後,它的tomcat控制檯顯示紅色字型,和自己專案的log4j的字型顏色(黑色)不一致,感覺很奇怪。  2、在網上查詢到了以下解決辦法。   a、tomcat沒啟動時,雙擊eclipse下方的serv

ToolBar修改menu item的字型顏色

RT:百度找了2個多小時的資料,各種修改App樣式的建議,沒一個管用的,無奈翻了去找谷大神,瞬間解決 真心覺得stackoverflow是一個很靠譜的網站 第一條採納的答案就是 該大神建議的方法是: 在你的樣式檔案中定義如下style <style

iOS修改導航條title字型顏色

1、第一種方法 self.title = @"title"; [self.navigationController.navigationBarsetTitleTextAttributes: @{

安卓系統新增字型修改系統預設的字型

由於專案需要,需要將第三方提供的.ttf字型檔檔案編譯至系統原始碼中,在百度上找了好久,都沒有找到想要的,最後還是Google解決了問題,這裡作下記錄。 (一)首先說怎麼把字型庫新增到裝置 其實Reference 中介紹的方法,已經非常簡單明瞭,無需贅述,但這裡還是

修改ios中statusbar字型顏色

//通過sharedApplication獲取該程式的UIApplication物件 UIApplication *app=[UIApplication sharedApplication]; app.applicationIconBadgeNumber=123; //設

Android點選View改變字型顏色邊框背景

  最近要做一個仿網易嚴選的底部彈出式選單,在彈出的選單中可以選擇具體的要買的商品,比如規格和購買數量等等;做到這裡時筆者想著給規格按鈕選項設定點選後改變字型顏色和邊框背景,用來顯示已選定的商品規格;      1、首先在values檔案下新建一個style

選單選項OptionsMenu實現改變字型顏色改變字型大小的功能

MainActivity的程式碼 package com.example.csdn1optionmenu; import android.app.Activity; import android.graphics.Color; import android.os.Bund

純css改變input的游標顏色字型顏色不變(設定游標顏色字型顏色不同)

使用input輸入框時,預設游標顏色是和字型顏色相同的,只需css設定color屬性就可以同時改變游標和字型顏色 但有時的需求是游標和字型顏色不一樣,網上的caret方法經測試chrome並不管用,所以,程式碼如下 <!DOCTYPE html> <htm

EXCEL2013中如何按照單元格顏色字型顏色排序【已解決】

在Excel表格中,有時候單元格排列的順序都是打亂的,這時候我們需要按一定規則進行重新排序。Excel的排序不僅可以對數值進行,同時還能識別單元格的顏色並對其進行排序。如圖【解決方法,教程視訊資料如下】 本教程視訊資料來源:http://edu.51cto.com/course/15404.html 完整

設定選單欄選單樣式(滑鼠移入移出狀態,背景顏色字型顏色大小,間距,邊框)

setStyleSheet(“QMenuBar{” “background:rgb(255,255,255);” “color:rgb(0,0,0);” “font-size:14px;” “padding:2px;” “border:1px solid rgb(165,171,184);”

ExtJS GridPanel根據條件改變字型顏色

1、在GridPanel中加入GridView <View> <ext:GridView ID="GridView1" runat="server"> <GetRowClass Fn="setRowBg"

iOS tabBarItem的選中與非選中時,背景顏色字型顏色

//設定tabBar的背景顏色,使用的方法 - (void)insertSubview:(UIView *)view atIndex:(NSInteger)index; //設定tabbar的背景 UIView *tabbarBgView = [[UIViewalloc]

ios改變導航欄顏色及其字型顏色

改變系統導航欄顏色 [self.navigationController.navigationBar setBarTintColor:[UIColor colorWithRed:237/255.0 green:10/255.0 blue:34/255.0 al