苹果VS笔一echarts scatter配置项内容和展示
配置项如下
var pathSymbols = {
reindeer: 'path://M164.8,41.6c-2.4-4.3-8.3-4.8-11.4-1c-10.3,12.3-33.7,13.8-45.4,13.7c-9.4-0.1-18.8,1.2-27.7,4.2C28.7,75.8,39.9,128,39.9,128c-2.5,1.4-6.4,6-9.5,9.9c-2.8,3.6-2.9,8.6-0.2,12.2c1.1,1.5,2.3,3.1,3.4,4.6c2.2,2.8,6.4,2.7,8.5-0.2c5.1-7.1,12.8-14.1,12.8-14.1c31.5,33,86-3.5,86-4C187.1,98.3,174.7,59.7,164.8,41.6z M131.5,89.8c-0.3,2.5-2.5,4.2-5,4c-38.5-4.3-59.8,29.4-60.7,30.8c-0.9,1.4-2.3,2.1-3.8,2.1c-0.8,0-1.6-0.2-2.4-0.7c-2.1-1.3-2.8-4.1-1.5-6.2c1-1.6,25.1-40,69.3-35C130,85.1,131.7,87.4,131.5,89.8z',
alipay: 'path://M990,680.9V198.5C990,94.4,905.7,10,801.5,10H198.5C94.4,10,10,94.3,10,198.5v603.1C10,905.6,94.3,990,198.5,990h603.1c92.8,0,169.9-67,185.5-155.3c-50-21.5-266.7-115.1-379.4-169c-85.8,104-175.8,166.5-311.3,166.5s-226-83.3-215.1-185.6c7.1-67.2,53.2-176.6,253-157.8c105.3,10,153.5,29.5,239.4,57.9c22.1-40.7,40.6-85.5,54.6-133.2H247.5v-37.7h188.3v-67.8H206v-41.5h229.8v-97.8c0,0,2.2-15.3,19-15.3h94.3v113.1h245v41.5h-245v67.8h199.7c-18.3,74.8-46.2,143.5-81,203.5C725.9,600.2,990,680.9,990,680.9L990,680.9L990,680.9z M281.4,767.6c-143.3,0-165.8-90.5-158.3-128.2s49-86.7,128.6-86.7c91.5,0,173.5,23.4,271.8,71.3C454.5,714,369.5,767.6,281.4,767.6L281.4,767.6z',
apple: 'path://M767.3,531.2c-1.1-123.8,101.4-184,106.1-186.8c-58-84.6-148-96.2-179.6-97.1c-75.6-8-148.9,45.2-187.3,45.2c-39.3,0-98.5-44.4-162.4-43.1c-82.2,1.3-159.1,48.9-201.3,122.8c-87,150.7-22.1,372.2,61.3,494c41.7,59.7,90.5,126.3,154.3,123.9c62.4-2.6,85.7-39.8,161.1-39.8c74.6,0,96.5,39.8,161.6,38.3c67-1.1,109.2-59.9,149.4-120.1c48.2-68.4,67.6-135.7,68.3-139.2C897.1,728.6,768.6,679.6,767.3,531.2z M644.4,167.1c33.6-42,56.5-99.1,50.2-157.1c-48.6,2.2-109.4,33.6-144.4,74.7c-31,36.2-58.6,95.5-51.5,151.3C553.3,240,609.3,208.4,644.4,167.1z',
pen: 'path://M383,986.6H10L10.8,618L590.6,40c35.9-35.8,94.9-35.5,131.3,1l240.9,241.4c36.2,36.2,36.2,90.8,0,127.1L834.1,537.6c-13.6,13.6-33.5,20.6-56.8,20.4c-25.4-0.4-49.7-10.3-64.8-26.3c-17.8-18.9-186.4-186.8-188.1-188.6c-12.1-12.1-12.2-31.7-0.1-43.8c12-12.1,31.6-12.2,43.8-0.1c7,6.9,171,170.3,189.5,190c7.2,7.7,27.9,8.6,32.9,4.4l128.6-128c11.9-11.9,11.9-27.5-0.1-39.5L678.1,84.6c-12.3-12.3-31.9-12.9-43.8-1.1L72.7,641.9L72.1,921h285.3l314-313.1c12.1-12.1,31.7-11.6,43.8,0.5c12.1,12.1,12.1,32.7,0,44.8L383,986.6z',
};
option = {
backgroundColor: '#fff',
legend: {
orient: 'horizontal',
x: 'left',
data:['apple','pen']
},
toolbox: {
show: true,
feature: {
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {}
}
},
xAxis: [{
axisTick: {
show: true,
"inside": false,
"length": 4,
},
boundaryGap:false,
type: 'category',
splitLine: {
show: true,
lineStyle: {
type: 'dash',
},
},
axisLabel: {
interval: 0,
fontSize:18,
fontWeight:'bold'
}
}],
yAxis: [{
type: 'value',
splitLine: {
show: false,
lineStyle: {
type: 'dashed'
}
},
axisLabel: {
show: false,
margin: 20,
textStyle: {
fontSize: 14
},
},
axisLine: {
show: false,
// symbol:['none','arrow'],
lineStyle: {
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 20
}
},
min: '0',
max: '300',
axisTick: {
show: false
},
//type: 'category'
}],
grid: {
top: '1%',
bottom: '5%'
}, //最终设置div高度
series: [{
name: 'apple',
type: 'scatter',
data: [
["1997", "0", 0, 1, "0"],
["1998", "0", 0, 1, "0"], //补空白
["1999", "75", 15, 1, "US8566250B2"],
["2000", "0", 0, 1, "0"], //补空白
["2001", "0", 0, 1, "0"], //补空白
["2002", "75", 30, 1, "US9319405B2\nUS7590861B2"],
//["2002","50",15,1,"US7590861B2"],
["2003", "50", 15, 1, "US7688314B3"],
["2004", "0", 0, 1, "0"], //补空白
//["2005", "0", 0, 1, "0"], //补空白
//["2006", "0", 0, 1, "0"], //补空白
["2007", "75", 30, 2, "US9158957B2\nUS9053351B2"],
//["2007","50",15,2,"US9053351B2"],
["2008", "50", 15, 0, "US9026462B2"],
["2008", "100", 15, 2, "US9235747B2"],
["2009", "0", 0, 1, "0"], //补空白
["2010", "100", 90, 2, "US8656486B2\nUS8378508B2\nUS8569875B2\nUS8803258B2\nUS9613249B2\nUS8888004B2"],
["2011", "50", 15, 2, "US8836478B2"],
["2012", "50", 75, 2, "US9348987B2\nUS8903141B2\nUS9471764B2\nUS9517022B2\nUS9436864B2"],
//["2013", "0", 0, 1, "0"], //补空白
["2014", "46", 30, 0, "US9299072B2\nUS9400977B2"],
["2015", "0", 0, 1, "0"],
],
symbol: pathSymbols.apple,
symbolSize: function(val) {
return val[2];
},
label: {
normal: {
show: true,
formatter: function(params) {
str = params.data[4]
return str
},
position: 'top',
fontSize: 15,
//fontWeight:'bold',
color: 'black'
}
},
itemStyle: {
normal: {
color: function(param) {
var color = ['grey', 'green', 'blue', 'red'];
return color[param.data[3]];
}
}
}
},
{
name: 'pen',
type: 'scatter',
symbol: pathSymbols.pen,
symbolSize: function(val) {
return val[2];
},
label: {
normal: {
show: true,
formatter: function(params) {
str = params.data[4]
return str
},
position: 'top',
fontSize: 15,
fontWeight:'bold',
color: 'black'
}
},
itemStyle: {
normal: {
color: function(param) {
var color = ['grey', 'green', 'blue', 'red'];
return color[param.data[3]];
}
}
},
//itemStyle: itemStyle,
data: [
//["2007","50",15,2,"US9053351B2"],
["1998", 200, 15, 3, "US7082213B2-非支付"],
["1999", 175, 15, 3, "US7047419B2-非支付"],
["1999", 150, 15, 3, "US7961917B2-非支付"],
//["1999", 150, 15, 3, "US7047419B2-非支付"],
["2000", "0", 0, 1, "0"], //补空白
["2001", 210, 15, 3, "US6925565B2-非支付"],
//["2001",200,15,3,"US7609863B2-非支付"],
["2001", 185, 15, 3, "US7281135B2-支付"],
//["2001",200,15,3,"US6925565B2-非支付"],
//["2001", 175, 15, 3, "US6925565B2-非支付"],
["2001", 160, 15, 3, "US7609863B2-非支付"],
["2002", "0", 0, 1, "0"], //补空白
["2003", 220, 15, 3, "US7363505B2-支付"],
["2004", 200, 15, 3, "US9830493B2-非支付"],
// ["2005", "0", 0, 1, "0"], //补空白
// ["2006", "0", 0, 1, "0"], //补空白
["2007", "0", 0, 1, "0"], //补空白
["2008", "0", 0, 1, "0"], //补空白
["2009", "0", 0, 1, "0"], //补空白
["2010", "0", 0, 1, "0"], //补空白
["2011", "0", 0, 1, "0"], //补空白
["2012", "0", 0, 1, "0"], //补空白
//["2013", "0", 0, 1, "0"], //补空白
["2014", "0", 0, 1, "0"], //补空白
]
},
]
};
// 或者
// option = {
// legend: {},
// tooltip: {},
// xAxis: [{type: 'category',splitLine:{show:false},axisTick:{show:false}}],
// yAxis: [{type: 'value',max:2,splitLine:{show:false},axisLabel:{show:false},axisTick:{show:false}}],
// dataset: {
// source: [
// ["Income"],
// [0,1,2],[10,1,5],[20,1,3],[30,1,6],[40,1,2],[50,1,7]
// ]
// },
// grid:{top:'50%',bottom:'40%'},
// series: [{
// type: 'scatter',
// symbolSize: function (val) {
// return val[2] * 5;
// },
// }]
// }
截图如下
