主题下载:
其他主题改名字就好了.[无责任猜测]
这里采用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文件
初始化时,将主题传入
var myChart = echarts.init(document.getElementById('main'),e_macarons); 截图如下
预览地址
拓展
已有的主题预览
自定义主题
Echarts 地址: