当前位置: 代码迷 >> 综合 >> ECharts图表的皮肤是什么?如何给图表换主题(皮肤)Theme?
  详细解决方案

ECharts图表的皮肤是什么?如何给图表换主题(皮肤)Theme?

热度:12   发布时间:2024-01-18 18:12:12.0
//定义一套绿色的皮肤
var theme = {// 默认色板color: [
'#408829', '#68a54a', '#a9cba2', '#86b379',
'#397b29', '#8abb6f', '#759c6a', '#bfd3b7'
],// 图表标题title: {itemGap: 8,textStyle: {fontWeight: 'normal',color: '#408829'}},// 值域dataRange: {color: ['#1f610a', '#97b58d']},// 工具箱toolbox: {color: ['#408829', '#408829', '#408829', '#408829']},// 提示框tooltip: {backgroundColor: 'rgba(0,0,0,0.5)',axisPointer: {            // 坐标轴指示器,坐标轴触发有效type: 'line',         // 默认为直线,可选为:'line' | 'shadow'lineStyle: {          // 直线指示器样式设置color: '#408829',type: 'dashed'},crossStyle: {color: '#408829'},shadowStyle: {                     // 阴影指示器样式设置color: 'rgba(200,200,200,0.3)'}}},// 区域缩放控制器dataZoom: {dataBackgroundColor: '#eee',            // 数据背景颜色fillerColor: 'rgba(64,136,41,0.2)',   // 填充颜色handleColor: '#408829'     // 手柄颜色},grid: {borderWidth: 0},// 类目轴categoryAxis: {axisLine: {            // 坐标轴线lineStyle: {       // 属性lineStyle控制线条样式color: '#408829'}},splitLine: {           // 分隔线lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式color: ['#eee']}}},// 数值型坐标轴默认参数valueAxis: {axisLine: {            // 坐标轴线lineStyle: {       // 属性lineStyle控制线条样式color: '#408829'}},splitArea: {show: true,areaStyle: {color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']}},splitLine: {           // 分隔线lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式color: ['#eee']}}},timeline: {lineStyle: {color: '#408829'},controlStyle: {normal: { color: '#408829' },emphasis: { color: '#408829' }}},// K线图默认参数k: {itemStyle: {normal: {color: '#68a54a',          // 阳线填充颜色color0: '#a9cba2',      // 阴线填充颜色lineStyle: {width: 1,color: '#408829',   // 阳线边框颜色color0: '#86b379'   // 阴线边框颜色}}}},map: {itemStyle: {normal: {areaStyle: {color: '#ddd'},label: {textStyle: {color: '#c12e34'}}},emphasis: {                 // 也是选中样式areaStyle: {color: '#99d2dd'},label: {textStyle: {color: '#c12e34'}}}}},force: {itemStyle: {normal: {linkStyle: {strokeColor: '#408829'}}}},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, '#86b379'], [0.8, '#68a54a'], [1, '#408829']],width: 8}},axisTick: {            // 坐标轴小标记splitNumber: 10,   // 每份split细分多少段length: 12,        // 属性length控制线长lineStyle: {       // 属性lineStyle控制线条样式color: 'auto'}},axisLabel: {           // 坐标轴文本标签,详见axis.axisLabeltextStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLEcolor: 'auto'}},splitLine: {           // 分隔线length: 18,         // 属性length控制线长lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式color: 'auto'}},pointer: {length: '90%',color: 'auto'},title: {textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLEcolor: '#333'}},detail: {textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLEcolor: 'auto'}}},textStyle: {fontFamily: '微软雅黑, Arial, Verdana, sans-serif'}
};
  相关解决方案