echarts使用e_macarons方法

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);

echarts使用e_macarons方法相关推荐

php链接echarts教程,图文详解echarts的使用方法（饼状图实例）
在页面布局时经常需要插入一些图表,比如饼状图,柱状图,地图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法 ...
Echarts的init方法
项目场景: 需要根据用户选择的分布模型,在同一块div上显示不同的分布模型.那么就需要复用这一个div容器,我的想法是:在每次换分布模型之前进行一次清除div内的innerHTML.可是出现了问题:在 ...
echarts setoption方法_在Vue和React中使用ECharts的多种方法
前言俗话说:"工欲善其事,必先利其器".现如今已经有许多成熟易用的可视化解决方案,例如ECharts,AntV等等.我们可以把这些解决方案比作是一套套成熟的"工具&qu ...
echarts 点击方法总结，点任意一点获取点击数据，举例说明:在多图联动中点击绘制标线...
关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击任意一个图上任意一点,在 ...
echarts formatter_vue使用echarts的方法
vue中经常需要使用echarts图标,这是我的总结方法,记录在这里,以便后续再想使用的时候可以快速找到自己的日记. 1.先在vue中安装导入echarts import echarts from ' ...
JS----多个Echarts resize方法，只有一个图表自适应生效
多个Echarts resize方法,只有一个图表自适应生效 Echarts的 resize方法,在多个echarts图标下window.onresize,只有一个图表自适应生效有多个时,单个生效 ...
echarts图形报表缓存问题(option数据缓存)
这几天我在工作中用到了echarts开发报表.每次查询出来的数据都是新的,但是echart展现的图形报表却还是之前的数据.网上找了搜索了很多次也没能解决,后面加了技术群才解决的. 我开始已经确定是报表 ...
[Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化
前一篇文章 "[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区" 主要是通过Echarts可视化介绍入门知识.中国地图和贵州地区各省份的数据分析,其中贵州地图才是它 ...
【echarts】echarts开发详解
echarts官方文档: http://echarts.baidu.com/doc/doc.html#简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javas ...

echarts使用e_macarons方法

echarts使用e_macarons方法相关推荐

最新文章

热门文章