echarts使用e_macarons方法

来源：互联网发布：足球阵型软件编辑：程序博客网时间：2024/06/07 08:18

echarts的macarons主题线条比较柔和，柱形也不尖锐。

使用方法如下：

1、创建macarons.js文件

2、页面添加script标签

3、初始化引用e_macarons

粘贴如下内容创建macarons.js:

// JavaScript Document
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'
}
}

页面添加script标签

初始化引用e_macarons

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

0 0