思路:
- 将事先需要用的配置属性写到option中
- 再把传进来的option相对应的属性进行合并
代码:
function myCharts(el,options) {
var myChart = echarts.init(document.getElementById(el))
var option = {
autoHeight:'',
title: {
text: '',
left:'auto',
subtext:'',
subtextStyle:{
fontSize: 16,
color:'#333',
lineHeight: 0
}
},
tooltip: {
trigger: 'axis', // 'item' -> 散点图,饼图 'axis' -> 柱状图,折线图
formatter:'',
axisPointer: { // 坐标轴指示器
type: 'shadow' //'line':直线指示器,'shadow':阴影指示器,'none':无指示器,'cross':十字准星指示器。其实是种简写,表示启用两个正交的轴的 axisPointer。
}
},
legend: {
show: true,
data: '',
orient: 'horizontal',
textStyle: {
color: '#333'
}
},
grid: {
top: 60,
left: '1%',
right: '1%',
bottom: '3%',
containLabel: true //否包含坐标轴的刻度标签
},
xAxis: {
show:true,
type: 'category',
boundaryGap: true, // 坐标轴两边留白策略
splitLine: { // 网格线
lineStyle: {
color:['#ccc']
}
},
axisLine: { // 坐标轴轴线
show: true
},
axisTick: { // 坐标轴刻度
show: true
},
axisLabel:{ //坐标轴刻度标签
show:true,
formatter:function (value) { // 坐标轴文字超过3个字的部分用...省略
let valueTxt = '';
if (value.length > 3) {
valueTxt = value.substring(0, 3) + '...';
}
else {
valueTxt = value;
}
return valueTxt ;
}
},
data: []
},
yAxis: {
show:true,
type: 'value',
splitLine: {
lineStyle: {
color:['#ccc']
}
},
axisLine: {
show: true
},
axisTick: {
show: true
},
axisLabel:{
show:true,
formatter:function (value) {
let valueTxt = '';
if (value.length > 3) {
valueTxt = value.substring(0, 3) + '...';
}
else {
valueTxt = value;
}
return valueTxt ;
}
},
data: []
},
series: [{
data: [],
name: '',
type: 'line',
smooth: true, // 平滑曲线(type: 'line')
symbol:'circle', // 图元的图形类别 (type: 'line')
silent: false, // 坐标轴是否是静态无法交互
areaStyle: { // 折线/面积图区域样式设置
color: 'rgb(0, 0, 0, 0)',
},
barMaxWidth:28, // 柱状图柱条最大宽度
label: { // 标签
show: true,
color:'#333',
formatter:'{c}',
position: 'top',
valueAnimation: true
},
labelLine: { // 标签引导线
show: false
},
radius:['40%', '60%'], // 饼图的半径(内半径和外半径)
legendHoverLink: true // 图例 hover 时的联动高亮
}]
}
option = assiginObj(option,options)
myChart.setOption(option,true)
if (option.autoHeight) {
myChart.resize({ height: option.autoHeight })
}
// 自适应
window.addEventListener("resize", function () {
myChart.resize()
})
}
// 深层嵌套对象合并
function assiginObj(target = {},sources= {}){
let obj = target;
if(typeof target != 'object' || typeof sources != 'object'){
return sources; // 如果其中一个不是对象 就返回sources
}
for(let key in sources){
// 如果target也存在相同key 那就再次合并
if(target.hasOwnProperty(key)){
obj[key] = assiginObj(target[key],sources[key]);
} else {
// 不存在就直接添加
obj[key] = sources[key];
}
}
return obj;
}
使用:
// 线图
let options1 = {
tooltip:{
axisPointer: { // 坐标轴指示器
type: 'line'
}
},
xAxis: {
data: ['衣服','鞋子','帽子','手套','裤子','袜子']
},
series: [{
data: [10,15,2,30,2,45,62],
name: '销售量',
type: 'line',
smooth: true,
symbol:'circle',
}]
}
myCharts('myChart1',options1)
// 横向柱状图
let options2 = {
xAxis: {
data: ['衣服包括(T-恤,衬衫,毛衣)','鞋子','帽子','手套','裤子','袜子']
},
series: [{
data: [10,15,2,30,2,45,62],
name: '销售量',
type: 'bar'
}]
}
myCharts('myChart2',options2)
// 镂空饼图
let options3 = {
tooltip: {
trigger: 'item'
},
xAxis:{
axisLine:{
show:false
}
},
yAxis:{
axisLine:{
show:false
}
},
series: [{
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
],
name: '销售量',
type: 'pie',
label:{
formatter: '{b} : {c} ({d}%)',
position: 'outside' // 饼图设置这个属性值后显示‘视觉引导线’(即labelLine)
},
labelLine: { // 标签引导线
show: true
}
}]
}
myCharts('myChart3',options3)
// 纵向柱状图
let options4 = {
xAxis:{
type: 'value',
},
yAxis:{
type: 'category',
data:['衣服包括(T-恤,衬衫,毛衣)','鞋子','帽子','手套','裤子','袜子']
},
series: [{
data: [10,15,2,30,2,45,62],
name: '销售量',
type: 'bar',
label:{
position: 'right'
},
}]
}
myCharts('myChart4',options4)
// 实心饼图
let options5 = {
tooltip: {
trigger: 'item'
},
xAxis:{
axisLine:{
show:false
}
},
yAxis:{
axisLine:{
show:false
}
},
series: [{
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
],
name: '销售量',
type: 'pie',
label:{
position: 'outside',
formatter: '{b} : {c} ({d}%)'
},
labelLine: { // 标签引导线
show: true
},
radius:[0, '75%'],
}]
}
myCharts('myChart5',options5)
-------------------------------------------之后会进一步进行优化------------------------------------------------------------