主题下载: 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.axisLabeltextStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEcolor: 'auto'}},splitLine: {           // 分隔线length :22,         // 属性length控制线长lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式color: 'auto'}},pointer : {width : 5,color : 'auto'},title : {textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEcolor: '#333'}},detail : {textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLEcolor: '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