echarts 2.0 macarons主題安裝

主題下載: http://echarts.baidu.com/doc/example/theme/macarons.js

其餘主題更名字就行了.[無責任猜想]

這裏採用AMD加載方式 [博主用的是requirejs]

在main.js中

require.config({
    paths:{
        'echarts':'js/echarts/echarts',
        'echarts/chart/bar' :'js/echarts/echarts', //bar
        'echarts/theme/macarons' : 'js/echarts/theme/macarons' //主題
    }
});
//使用
require(['echarts','echarts/theme/macarons','echarts/chart/bar'],function(ec,theme){
    var myChart = ec.init(document.getElementById('main'),theme); //設置主題
});

在其餘頁面使用一樣

index.js

//使用
define(['echarts','echarts/theme/macarons','echarts/chart/bar'],function(ec,theme){
    var myChart = ec.init(document.getElementById('main'),theme); //設置主題
});

標籤引入的方式

建立macarons.js文件,粘貼如下內容

var e_macarons = {
    // 默認色板
    color: [
        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
    ],
    // 圖表標題
    title: {
        itemGap: 8,
        textStyle: {
            fontWeight: 'normal',
            color: '#008acd'          // 主標題文字顏色
        }
    },
    
    // 圖例
    legend: {
        itemGap: 8
    },
    
    // 值域
    dataRange: {
        itemWidth: 15,
        //color:['#1e90ff','#afeeee']
        color: ['#2ec7c9','#b6a2de']
    },
    toolbox: {
        color : ['#1e90ff', '#1e90ff', '#1e90ff', '#1e90ff'],
        effectiveColor : '#ff4500',
        itemGap: 8
    },
    // 提示框
    tooltip: {
        backgroundColor: 'rgba(50,50,50,0.5)',     // 提示背景顏色，默認爲透明度爲0.7的黑色
        axisPointer : {            // 座標軸指示器，座標軸觸發有效
            type : 'line',         // 默認爲直線，可選爲：'line' | 'shadow'
            lineStyle : {          // 直線指示器樣式設置
                color: '#008acd'
            },
            crossStyle: {
                color: '#008acd'
            },
            shadowStyle : {                     // 陰影指示器樣式設置
                color: 'rgba(200,200,200,0.2)'
            }
        }
    },
    // 區域縮放控制器
    dataZoom: {
        dataBackgroundColor: '#efefff',            // 數據背景顏色
        fillerColor: 'rgba(182,162,222,0.2)',   // 填充顏色
        handleColor: '#008acd'    // 手柄顏色
    },
    // 網格
    grid: {
        borderColor: '#eee'
    },
    // 類目軸
    categoryAxis: {
        axisLine: {            // 座標軸線
            lineStyle: {       // 屬性lineStyle控制線條樣式
                color: '#008acd'
            }
        },
        splitLine: {           // 分隔線
            lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式
                color: ['#eee']
            }
        }
    },
    // 數值型座標軸默認參數
    valueAxis: {
        axisLine: {            // 座標軸線
            lineStyle: {       // 屬性lineStyle控制線條樣式
                color: '#008acd'
            }
        },
        splitArea : {
            show : true,
            areaStyle : {
                color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
            }
        },
        splitLine: {           // 分隔線
            lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式
                color: ['#eee']
            }
        }
    },
    polar : {
        axisLine: {            // 座標軸線
            lineStyle: {       // 屬性lineStyle控制線條樣式
                color: '#ddd'
            }
        },
        splitArea : {
            show : true,
            areaStyle : {
                color: ['rgba(250,250,250,0.2)','rgba(200,200,200,0.2)']
            }
        },
        splitLine : {
            lineStyle : {
                color : '#ddd'
            }
        }
    },
    timeline : {
        lineStyle : {
            color : '#008acd'
        },
        controlStyle : {
            normal : { color : '#008acd'},
            emphasis : { color : '#008acd'}
        },
        symbol : 'emptyCircle',
        symbolSize : 3
    },
    // 柱形圖默認參數
    bar: {
        itemStyle: {
            normal: {
                borderRadius: 5
            },
            emphasis: {
                borderRadius: 5
            }
        }
    },
    // 折線圖默認參數
    line: {
        smooth : true,
        symbol: 'emptyCircle',  // 拐點圖形類型
        symbolSize: 3           // 拐點圖形大小
    },
    
    // K線圖默認參數
    k: {
        itemStyle: {
            normal: {
                color: '#d87a80',       // 陽線填充顏色
                color0: '#2ec7c9',      // 陰線填充顏色
                lineStyle: {
                    width: 1,
                    color: '#d87a80',   // 陽線邊框顏色
                    color0: '#2ec7c9'   // 陰線邊框顏色
                }
            }
        }
    },
    
    // 散點圖默認參數
    scatter: {
        symbol: 'circle',    // 圖形類型
        symbolSize: 4        // 圖形大小，半寬（半徑）參數，當圖形爲方向或菱形則總寬度爲symbolSize * 2
    },
    // 雷達圖默認參數
    radar : {
        symbol: 'emptyCircle',    // 圖形類型
        symbolSize:3
        //symbol: null,         // 拐點圖形類型
        //symbolRotate : null,  // 圖形旋轉控制
    },
    map: {
        itemStyle: {
            normal: {
                areaStyle: {
                    color: '#ddd'
                },
                label: {
                    textStyle: {
                        color: '#d87a80'
                    }
                }
            },
            emphasis: {                 // 也是選中樣式
                areaStyle: {
                    color: '#fe994e'
                },
                label: {
                    textStyle: {
                        color: 'rgb(100,0,0)'
                    }
                }
            }
        }
    },
    
    force : {
        itemStyle: {
            normal: {
                linkStyle : {
                    strokeColor : '#1e90ff'
                }
            }
        }
    },
    chord : {
        padding : 4,
        itemStyle : {
            normal : {
                lineStyle : {
                    width : 1,
                    color : 'rgba(128, 128, 128, 0.5)'
                },
                chordStyle : {
                    lineStyle : {
                        width : 1,
                        color : 'rgba(128, 128, 128, 0.5)'
                    }
                }
            },
            emphasis : {
                lineStyle : {
                    width : 1,
                    color : 'rgba(128, 128, 128, 0.5)'
                },
                chordStyle : {
                    lineStyle : {
                        width : 1,
                        color : 'rgba(128, 128, 128, 0.5)'
                    }
                }
            }
        }
    },
    gauge : {
        startAngle: 225,
        endAngle : -45,
        axisLine: {            // 座標軸線
            show: true,        // 默認顯示，屬性show控制顯示與否
            lineStyle: {       // 屬性lineStyle控制線條樣式
                color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']], 
                width: 10
            }
        },
        axisTick: {            // 座標軸小標記
            splitNumber: 10,   // 每份split細分多少段
            length :15,        // 屬性length控制線長
            lineStyle: {       // 屬性lineStyle控制線條樣式
                color: 'auto'
            }
        },
        axisLabel: {           // 座標軸文本標籤，詳見axis.axisLabel
            textStyle: {       // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
                color: 'auto'
            }
        },
        splitLine: {           // 分隔線
            length :22,         // 屬性length控制線長
            lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式
                color: 'auto'
            }
        },
        pointer : {
            width : 5,
            color : 'auto'
        },
        title : {
            textStyle: {       // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
                color: '#333'
            }
        },
        detail : {
            textStyle: {       // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
                color: 'auto'
            }
        }
    },
    
    textStyle: {
        fontFamily: '微軟雅黑, Arial, Verdana, sans-serif'
    }
}

在頁面中引入該js文件

<script src="js/macarons.js"></script>

初始化時,將主題傳入

var myChart = echarts.init(document.getElementById('main'),e_macarons);

截圖以下

預覽地址

http://sandbox.runjs.cn/show/i4ehwkrc

拓展

已有的主題預覽

http://echarts.baidu.com/doc/example/theme.html

自定義主題

http://echarts.baidu.com/doc/example/themeDesigner.html

Echarts 地址:

http://echarts.baidu.com

http://ecomfe.github.com/echarts

http://ecomfe.github.com/zrender