echarts的macarons主題線條比較柔和，柱形也不尖銳。

使用方法如下：

1、創(chuàng)建macarons.js文件

2、頁面添加script標(biāo)簽

3、初始化引用e_macarons

// javaScript Documentvar e_macarons = {    // 默認色板    color: [        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'    ],    // 圖表標(biāo)題    title: {        itemGap: 8,        textStyle: {            fontWeight: 'normal',            color: '#008acd'          // 主標(biāo)題文字顏色        }    },        // 圖例    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 : {            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效            type : 'line',         // 默認為直線，可選為：'line' | 'shadow'            lineStyle : {          // 直線指示器樣式設(shè)置                color: '#008acd'            },            crossStyle: {                color: '#008acd'            },            shadowStyle : {                     // 陰影指示器樣式設(shè)置                color: 'rgba(200,200,200,0.2)'            }        }    },    // 區(qū)域縮放控制器    dataZoom: {        dataBackgroundColor: '#efefff',            // 數(shù)據(jù)背景顏色        fillerColor: 'rgba(182,162,222,0.2)',   // 填充顏色        handleColor: '#008acd'    // 手柄顏色    },    // 網(wǎng)格    grid: {        borderColor: '#eee'    },    // 類目軸    categoryAxis: {        axisLine: {            // 坐標(biāo)軸線            lineStyle: {       // 屬性lineStyle控制線條樣式                color: '#008acd'            }        },        splitLine: {           // 分隔線            lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式                color: ['#eee']            }        }    },    // 數(shù)值型坐標(biāo)軸默認參數(shù)    valueAxis: {        axisLine: {            // 坐標(biāo)軸線            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: {            // 坐標(biāo)軸線            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    },    // 柱形圖默認參數(shù)    bar: {        itemStyle: {            normal: {                borderRadius: 5            },            emphasis: {                borderRadius: 5            }        }    },    // 折線圖默認參數(shù)    line: {        smooth : true,        symbol: 'emptyCircle',  // 拐點圖形類型        symbolSize: 3           // 拐點圖形大小    },        // K線圖默認參數(shù)    k: {        itemStyle: {            normal: {                color: '#d87a80',       // 陽線填充顏色                color0: '#2ec7c9',      // 陰線填充顏色                lineStyle: {                    width: 1,                    color: '#d87a80',   // 陽線邊框顏色                    color0: '#2ec7c9'   // 陰線邊框顏色                }            }        }    },        // 散點圖默認參數(shù)    scatter: {        symbol: 'circle',    // 圖形類型        symbolSize: 4        // 圖形大小，半寬（半徑）參數(shù)，當(dāng)圖形為方向或菱形則總寬度為symbolSize * 2    },    // 雷達圖默認參數(shù)    radar : {        symbol: 'emptyCircle',    // 圖形類型        symbolSize:3        //symbol: null,         // 拐點圖形類型        //symbolRotate : null,  // 圖形旋轉(zhuǎn)控制    },    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: {            // 坐標(biāo)軸線            show: true,        // 默認顯示，屬性show控制顯示與否            lineStyle: {       // 屬性lineStyle控制線條樣式                color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']],                 width: 10            }        },        axisTick: {            // 坐標(biāo)軸小標(biāo)記            splitNumber: 10,   // 每份split細分多少段            length :15,        // 屬性length控制線長            lineStyle: {       // 屬性lineStyle控制線條樣式                color: 'auto'            }        },        axisLabel: {           // 坐標(biāo)軸文本標(biāo)簽，詳見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'    }}

頁面添加script標(biāo)簽

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

初始化引用e_macarons

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