echarts有关树图、桑基图、K线图等可视化
2020-11-11 本文已影响0人
estate47
词云图
词云图
function createRandomItemStyle() {
return {
normal: {
color: 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')'
}
};
} #随机定义颜色
option = {
title: {
text: '说唱新世代',
link: 'https://www.bilibili.com/bangumi/play/ss34053?bsource=baidu_aladdin'
},
tooltip: {
show: true
},
series: [{
name: '喜爱',
type: 'wordCloud',
size: ['80%', '80%'],
textRotation : [0, 45, 90, -45], #字符串的倾斜角度
textPadding: 0,
autoSize: {
enable: true,
minSize: 14
},
data: [
{
name: "love in my pocket",
value: 2800,
url:"https://music.163.com/#/search/m/?s=love%20in%20my%20pocket&type=1&market=baiduqk", #点击即可跳转链接
itemStyle: {
normal: {
color: 'black'
}
}
},
{
name: "她和她的她",
value: 2700,
itemStyle: createRandomItemStyle()
},
{
name: "而立",
value: 2600,
itemStyle: createRandomItemStyle()
},
{
name: "Love Paradise",
value: 2500,
itemStyle: createRandomItemStyle()
},
{
name: "粒子们",
value: 2467,
itemStyle: createRandomItemStyle()
},
{
name: "we we ",
value: 2244,
itemStyle: createRandomItemStyle()
},
{
name: "掌斗剑",
value: 1898,
itemStyle: createRandomItemStyle()
},
{
name: "成名",
value: 1484,
itemStyle: createRandomItemStyle()
},
{
name: "给说唱新世代参赛选手的一封建议信",
value: 1112,
itemStyle: createRandomItemStyle()
},
{
name: "美杜莎庄园",
value: 965,
itemStyle: createRandomItemStyle()
},
{
name: "我不想死在二十岁",
value: 847,
itemStyle: createRandomItemStyle()
},
{
name: "叫爸爸",
value: 582,
itemStyle: createRandomItemStyle()
},
{
name: "来自世界的恶意",
value: 555,
itemStyle: createRandomItemStyle()
},
{
name: "画",
value: 550,
itemStyle: createRandomItemStyle()
},
]
}]
};
myChart.on('click', function(params) {
console.log(params.name);
window.open(params.data.url);
})
桑基图
option = {
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataZoom": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": {
"trigger": "item",
"triggerOn": "mousemove"
},
"series": {
"type": "sankey",
"layout": "none",
"itemStyle": {
"borderWidth": 1,
"borderColor": "#aaa"
},
"lineStyle": {
"color": "source",
"curveness": 0.5
},
"data": [
{
"name": "2020年"
},
{
"name": "2019年"
},
{
"name": "2018年"
},
{
"name": "2017年"
},
{
"name": "2016年"
},
{
"name": "资产负债表"
},
{
"name": "利润表"
},
{
"name": "现金流量表"
},
{
"name": "资产"
},
{
"name": "负债"
},
{
"name": "所有者权益"
},
{
"name": "收入"
},
{
"name": "费用"
},
{
"name": "利润"
},
{
"name": "现金流入"
},
{
"name": "现金流出"
},
{
"name": "现金净流量"
}
],
"links": [
{
"source": "2020年",
"target": "现金流量表",
"value": "3"
},
{
"source": "2020年",
"target": "资产负债表",
"value": "14"
},
{
"source": "2020年",
"target": "利润表",
"value": "11"
},
{
"source": "2019年",
"target": "现金流量表",
"value": "7"
},
{
"source": "2019年",
"target": "资产负债表",
"value": "4"
},
{
"source": "2019年",
"target": "利润表",
"value": "12"
},
{
"source": "2018年",
"target": "现金流量表",
"value": "5"
},
{
"source": "2018年",
"target": "资产负债表",
"value": "6"
},
{
"source": "2018年",
"target": "利润表",
"value": "7"
},
{
"source": "2017年",
"target": "现金流量表",
"value": "3"
},
{
"source": "2017年",
"target": "利润表",
"value": "7"
},
{
"source": "2017年",
"target": "资产负债表",
"value": "8"
},
{
"source": "2016年",
"target": "现金流量表",
"value": "2"
},
{
"source": "2016年",
"target": "利润表",
"value": "5"
},
{
"source": "2016年",
"target": "资产负债表",
"value": "6"
},
{
"source": "资产负债表",
"target": "资产",
"value": "11"
},
{
"source": "资产负债表",
"target": "负债",
"value": "4"
},
{
"source": "资产负债表",
"target": "所有者权益",
"value": "7"
},
{
"source": "利润表",
"target": "收入",
"value": "9"
},
{
"source": "利润表",
"target": "费用",
"value": "2"
},
{
"source": "利润表",
"target": "利润",
"value": "7"
},
{
"source": "现金流量表",
"target": "现金流入",
"value": "17"
},
{
"source": "现金流量表",
"target": "现金流出",
"value": "8"
},
{
"source": "现金流量表",
"target": "现金净流量",
"value": "9"
},
{
"source": "资产",
"target": "负债",
"value": 4
},
{
"source": "资产",
"target": "所有者权益",
"value": 7
},
{
"source": "收入",
"target": "费用",
"value": 2
},
{
"source": "收入",
"target": "利润",
"value": 7
},
{
"source": "现金流入",
"target": "现金流出",
"value": 8
},
{
"source": "现金流入",
"target": "现金净流量",
"value": 9
}
]
}
};
K线图
option=
{
"title": {
"text": "2020年上半年股票波动"
},
"tooltip": {
"trigger": "axis"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"dataZoom": {
"show": true,
"realtime": true,
"start": 50,
"end": 100
},
"xAxis": [
{
"type": "category",
"boundaryGap": true,
"axisTick": {
"onGap": false
},
"splitLine": {
"show": false
},
"data": [
"2020/1/24",
"2020/1/25",
"2020/1/28",
"2020/1/29",
"2020/1/30",
"2020/1/31",
"2020/2/1",
"2020/2/4",
"2020/2/5",
"2020/2/6",
"2020/2/7",
"2020/2/8",
"2020/2/18",
"2020/2/19",
"2020/2/20",
"2020/2/21",
"2020/2/22",
"2020/2/25",
"2020/2/26",
"2020/2/27",
"2020/2/28",
"2020/3/1",
"2020/3/4",
"2020/3/5",
"2020/3/6",
"2020/3/7",
"2020/3/8",
"2020/3/11",
"2020/3/12",
"2020/3/13",
"2020/3/14",
"2020/3/15",
"2020/3/18",
"2020/3/19",
"2020/3/20",
"2020/3/21",
"2020/3/22",
"2020/3/25",
"2020/3/26",
"2020/3/27",
"2020/3/28",
"2020/3/29",
"2020/4/1",
"2020/4/2",
"2020/4/3",
"2020/4/8",
"2020/4/9",
"2020/4/10",
"2020/4/11",
"2020/4/12",
"2020/4/15",
"2020/4/16",
"2020/4/17",
"2020/4/18",
"2020/4/19",
"2020/4/22",
"2020/4/23",
"2020/4/24",
"2020/4/25",
"2020/4/26",
"2020/5/2",
"2020/5/3",
"2020/5/6",
"2020/5/7",
"2020/5/8",
"2020/5/9",
"2020/5/10",
"2020/5/13",
"2020/5/14",
"2020/5/15",
"2020/5/16",
"2020/5/17",
"2020/5/20",
"2020/5/21",
"2020/5/22",
"2020/5/23",
"2020/5/24",
"2020/5/27",
"2020/5/28",
"2020/5/29",
"2020/5/30",
"2020/5/31",
"2020/6/3",
"2020/6/4",
"2020/6/5",
"2020/6/6",
"2020/6/7",
"2020/6/13"
]
}
],
"yAxis": [
{
"type": "value",
"scale": true,
"boundaryGap": [
0.01,
0.01
]
}
],
"series": [
{
"name": "波动情况",
"type": "k",
markPoint: {
label: {
normal: {
formatter: function (param) {
return param != null ? Math.round(param.value) : '';
}
}
},
data: [
{
name: 'highest value',
type: 'max',
valueDim: 'highest'
},
{
name: 'lowest value',
type: 'min',
valueDim: 'lowest'
},
{
name: 'average value on close',
type: 'average',
valueDim: 'close'
}
],
tooltip: {
formatter: function (param) {
return param.name + '<br>' + (param.data.coord || '');
}
}
},
"data": [
[
2320.26,
2302.6,
2287.3,
2362.94
],
[
2300,
2291.3,
2288.26,
2308.38
],
[
2295.35,
2346.5,
2295.35,
2346.92
],
[
2347.22,
2358.98,
2337.35,
2363.8
],
[
2360.75,
2382.48,
2347.89,
2383.76
],
[
2383.43,
2385.42,
2371.23,
2391.82
],
[
2377.41,
2419.02,
2369.57,
2421.15
],
[
2425.92,
2428.15,
2417.58,
2440.38
],
[
2411,
2433.13,
2403.3,
2437.42
],
[
2432.68,
2434.48,
2427.7,
2441.73
],
[
2430.69,
2418.53,
2394.22,
2433.89
],
[
2416.62,
2432.4,
2414.4,
2443.03
],
[
2441.91,
2421.56,
2415.43,
2444.8
],
[
2420.26,
2382.91,
2373.53,
2427.07
],
[
2383.49,
2397.18,
2370.61,
2397.94
],
[
2378.82,
2325.95,
2309.17,
2378.82
],
[
2322.94,
2314.16,
2308.76,
2330.88
],
[
2320.62,
2325.82,
2315.01,
2338.78
],
[
2313.74,
2293.34,
2289.89,
2340.71
],
[
2297.77,
2313.22,
2292.03,
2324.63
],
[
2322.32,
2365.59,
2308.92,
2366.16
],
[
2364.54,
2359.51,
2330.86,
2369.65
],
[
2332.08,
2273.4,
2259.25,
2333.54
],
[
2274.81,
2326.31,
2270.1,
2328.14
],
[
2333.61,
2347.18,
2321.6,
2351.44
],
[
2340.44,
2324.29,
2304.27,
2352.02
],
[
2326.42,
2318.61,
2314.59,
2333.67
],
[
2314.68,
2310.59,
2296.58,
2320.96
],
[
2309.16,
2286.6,
2264.83,
2333.29
],
[
2282.17,
2263.97,
2253.25,
2286.33
],
[
2255.77,
2270.28,
2253.31,
2276.22
],
[
2269.31,
2278.4,
2250,
2312.08
],
[
2267.29,
2240.02,
2239.21,
2276.05
],
[
2244.26,
2257.43,
2232.02,
2261.31
],
[
2257.74,
2317.37,
2257.42,
2317.86
],
[
2318.21,
2324.24,
2311.6,
2330.81
],
[
2321.4,
2328.28,
2314.97,
2332
],
[
2334.74,
2326.72,
2319.91,
2344.89
],
[
2318.58,
2297.67,
2281.12,
2319.99
],
[
2299.38,
2301.26,
2289,
2323.48
],
[
2273.55,
2236.3,
2232.91,
2273.55
],
[
2238.49,
2236.62,
2228.81,
2246.87
],
[
2229.46,
2234.4,
2227.31,
2243.95
],
[
2234.9,
2227.74,
2220.44,
2253.42
],
[
2232.69,
2225.29,
2217.25,
2241.34
],
[
2196.24,
2211.59,
2180.67,
2212.59
],
[
2215.47,
2225.77,
2215.47,
2234.73
],
[
2224.93,
2226.13,
2212.56,
2233.04
],
[
2236.98,
2219.55,
2217.26,
2242.48
],
[
2218.09,
2206.78,
2204.44,
2226.26
],
[
2199.91,
2181.94,
2177.39,
2204.99
],
[
2169.63,
2194.85,
2165.78,
2196.43
],
[
2195.03,
2193.8,
2178.47,
2197.51
],
[
2181.82,
2197.6,
2175.44,
2206.03
],
[
2201.12,
2244.64,
2200.58,
2250.11
],
[
2236.4,
2242.17,
2232.26,
2245.12
],
[
2242.62,
2184.54,
2182.81,
2242.62
],
[
2187.35,
2218.32,
2184.11,
2226.12
],
[
2213.19,
2199.31,
2191.85,
2224.63
],
[
2203.89,
2177.91,
2173.86,
2210.58
],
[
2170.78,
2174.12,
2161.14,
2179.65
],
[
2179.05,
2205.5,
2179.05,
2222.81
],
[
2212.5,
2231.17,
2212.5,
2236.07
],
[
2227.86,
2235.57,
2219.44,
2240.26
],
[
2242.39,
2246.3,
2235.42,
2255.21
],
[
2246.96,
2232.97,
2221.38,
2247.86
],
[
2228.82,
2246.83,
2225.81,
2247.67
],
[
2247.68,
2241.92,
2231.36,
2250.85
],
[
2238.9,
2217.01,
2205.87,
2239.93
],
[
2217.09,
2224.8,
2213.58,
2225.19
],
[
2221.34,
2251.81,
2210.77,
2252.87
],
[
2249.81,
2282.87,
2248.41,
2288.09
],
[
2286.33,
2299.99,
2281.9,
2309.39
],
[
2297.11,
2305.11,
2290.12,
2305.3
],
[
2303.75,
2302.4,
2292.43,
2314.18
],
[
2293.81,
2275.67,
2274.1,
2304.95
],
[
2281.45,
2288.53,
2270.25,
2292.59
],
[
2286.66,
2293.08,
2283.94,
2301.7
],
[
2293.4,
2321.32,
2281.47,
2322.1
],
[
2323.54,
2324.02,
2321.17,
2334.33
],
[
2316.25,
2317.75,
2310.49,
2325.72
],
[
2320.74,
2300.59,
2299.37,
2325.53
],
[
2300.21,
2299.25,
2294.11,
2313.43
],
[
2297.1,
2272.42,
2264.76,
2297.1
],
[
2270.71,
2270.93,
2260.87,
2276.86
],
[
2264.43,
2242.11,
2240.07,
2266.69
],
[
2242.26,
2210.9,
2205.07,
2250.63
],
[
2190.1,
2148.35,
2126.22,
2190.1
]
]
}
]
}
线形图
option = {
"title" : {
"text": "历史数据对比分析",
"subtext": "虚拟数据",
"x":"center"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"magicType" : {show: true, type: ['line', 'bar']}, #可切换图形
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": {
"trigger": "axis",
"formatter":"{a}<br/>{c}万元", #浮标中用<br/> 换行，图中显示用\n\n换行
"axisPointer": {
"type": "shadow"
}
},
"legend": {
"data": [
"历史数据",
"前10%分位数",
"后10%分位数",
"平均值"
],
"y":"bottom"
},
"xAxis": [
{
"name": "年份",
"type": "category",
"data": [
"2016年Q3",
"2017年Q3",
"2018年Q3",
"2019年Q3",
"2020年Q3"
]
}
],
"yAxis": {
"scale": false,
"name": "金额(万元)",
scale:true, #y轴自定义不从0开始
},
"series": [
{
"name": "历史数据",
"symbolSize": 10,
"data": [
6841,
5368,
6635,
4575,
5959
],
"type": "line",
"smooth": true, #线条平滑
"lineStyle": {
"width": 3
},
markLine : {
data : [
{type : 'average', name: '平均值'} #添加标记线
]
},
"markPoint": {
"data": [
{
"type": "max",
"name": "最大值" #添加标记点
},
{
"type": "min",
"name": "最小值"
},
{value:"标记值",xAxis:4,yAxis:5000}, #根据坐标位置来标记点
]
}
},
{
"name": "前10%分位数",
"type": "line",
"smooth": true,
"itemStyle": {
"color": "#87CEFF",
"normal": {
"lineStyle": {
"width": 2,
"type": "dashed" #把折线改成虚线
}
}
},
"data": [
6000,
4368,
5635,
4075,
5059
]
},
{
"name": "后10%分位数",
"type": "line",
"smooth": true,
"itemStyle": {
"color": "#fff",
"normal": {
"lineStyle": {
"width": 2,
"type": "dashed"
}
}
},
"data": [
7800,
7700,
7722,
6775,
8659
]
}
]
};
柱形图
option = {
backgroundColor: "#CCFFFF", #背景颜色
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['蒸发量', '降水量', '平均温度']
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisPointer: {
type: 'shadow'
},
"axisLine": {
lineStyle: {
color: '#90979c'
}
},
}
],
yAxis: [
{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
},
"axisLine": {
lineStyle: {
color: '#90979c'
}
},
"splitLine": {
"show": false
}, #去掉分割线
"axisTick": {
"show": false
}, #去掉数值线
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
},
"axisLine": {
lineStyle: {
color: '#90979c'
}
},
"splitLine": {
"show": false
},
}
],
"dataZoom": [{ #添加时间轴
"show": true,
"height": 30,
"xAxisIndex": [
0
],
bottom: 10,
"start": 10,
"end": 80,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
series: [
{
name: '蒸发量',
type: 'bar',
stack:"水量", #堆积条形参数
"barMaxWidth": 40, #柱形宽度
"itemStyle": {
"normal": {
"color": "rgba(0,191,183,1)",
"barBorderRadius": 0,
"label": {
"show": true,
"position": "inside",
}
}
},
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
stack:"水量",
barGap: '-100%', #条形重合不堆积
"itemStyle": {
"normal": {
"color": "rgba(255,144,128,1)",
"label": {
"show": true,
"textStyle": {
"color": "#fff"
},
"position": "inside",
formatter: function(p) {
return p.value > 0 ? (p.value) : '';
}
}
}
},
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: '平均温度',
type: 'line',
yAxisIndex: 1, #另一个坐标轴
symbol:'circle',
symbolSize:10,
"itemStyle": {
"normal": {
"color": "rgba(252,230,48,1)",
"barBorderRadius": 0,
}
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
散点图
$.getJSON(ROOT_PATH + '/data/asset/data/house-price-area2.json', function (data) {
#数据地址：https://echarts.apache.org/examples/data/asset/data/house-price-area2.json
var option = {
title: {
text: 'Dispersion of house price based on the area',
left: 'center',
top: 0
},
visualMap: { #添加视觉通道组件
min: 15202,
max: 159980,
dimension: 1,
orient: 'vertical',
right: 10,
top: 'center',
text: ['HIGH', 'LOW'],
calculable: true,
inRange: {
color: ['#f2c31a', '#24b7f2']
}
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'cross'
}
},
xAxis: [{
type: 'value'
}],
yAxis: [{
type: 'value'
}],
series: [{
name: 'price-area',
type: 'scatter',
symbolSize: 5,
itemStyle: {
normal: {
borderWidth: 0.2,
borderColor: '#fff'
}
},
data: data
}]
};
myChart.setOption(option);
});
饼图、玫瑰图
option = {
title : {
text: '南丁格尔玫瑰图',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)" #ab文本，c数值，d百分比
},
legend: {
x : 'center',
y : 'bottom',
data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'半径模式',
type:'pie',
radius : [20, 110], #调节饼图的大小
center : ['25%', 200], #位置
// roseType : 'radius',
width: '40%', // for funnel
max: 40, // for funnel
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true
},
labelLine : {
show : true
}
}
},
data:[
{value:10, name:'rose1'},
{value:5, name:'rose2'},
{value:15, name:'rose3'},
{value:25, name:'rose4'},
{value:20, name:'rose5'},
{value:35, name:'rose6'},
{value:30, name:'rose7'},
{value:40, name:'rose8'}
]
},
{
name:'面积模式',
type:'pie',
radius : [30, 110],
center : ['75%', 200],
roseType : 'area',
x: '50%', // for funnel
max: 40, // for funnel
sort : 'ascending', // for funnel
data:[
{value:10, name:'rose1'},
{value:5, name:'rose2'},
{value:15, name:'rose3'},
{value:25, name:'rose4'},
{value:20, name:'rose5'},
{value:35, name:'rose6'},
{value:30, name:'rose7'},
{value:40, name:'rose8'}
]
}
]
};
雷达图
option = {
"title": {
"text": "企业经营状况"
},
"tooltip": {
"trigger": "axis"
},
"legend": {
"x": "center",
"data": [
"企业状况",
"2019年",
"2020年"
]
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"calculable": true,
"polar": [
{
"indicator": [
{
"text": "收益性",
"max": 100
},
{
"text": "成长性",
"max": 100
},
{
"text": "安全性",
"max": 100
},
{
"text": "流动性",
"max": 100
},
{
"text": "生产性",
"max": 100
}
],
"center": [
"25%",
"50%"
],
"radius": 80 #图大小
},
{
"indicator": [
{
"text": "资产负债率",
"max": 100
},
{
"text": "主营业务增长率",
"max": 100
},
{
"text": "主营业务利润率",
"max": 100
},
{
"text": "存货周转率",
"max": 100
},
{
"text": "现金流动负债比",
"max": 100
}
],
"center": [
"65%",
"50%"
],
"radius": 80
}
],
"series": [
{
"type": "radar",
"tooltip": {
"trigger": "item"
},
"itemStyle": {
"normal": {
"areaStyle": {
"type": "default"
}
}
},
"data": [
{
"value": [
60,
73,
85,
40,
80
],
"name": "企业状况"
}
]
},
{
"type": "radar",
"tooltip": {
"trigger": "item"
},
"polarIndex": 1, #多图中需定义位置
"data": [
{
"value": [
65,
30,
40,
55,
55
],
"name": "2019年"
},
{
"value": [
55,
30,
45,
50,
53
],
"name": "2020年"
}
]
}
]
};
漏斗图
option = {
"color": [
"rgba(255, 69, 0, 0.5)",
"rgba(255, 150, 0, 0.5)",
"rgba(255, 200, 0, 0.5)",
"rgba(155, 200, 50, 0.5)",
"rgba(55, 200, 100, 0.5)"
],
"title": {
"text": "网页访问实际与预计情况"
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c}%"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"legend": {
"data": [
"展现",
"点击",
"访问",
"咨询",
"订单"
]
},
"calculable": true,
"series": [
{
"name": "预期",
"type": "funnel",
"x": "10%",
"width": "80%",
"itemStyle": {
"normal": {
"label": {
"formatter": "{b}预期"
},
"labelLine": {
"show": false
}
},
"emphasis": {
"label": {
"position": "inside",
"formatter": "{b}预期 : {c}%"
}
}
},
"data": [
{
"value": 60,
"name": "访问"
},
{
"value": 40,
"name": "咨询"
},
{
"value": 20,
"name": "订单"
},
{
"value": 80,
"name": "点击"
},
{
"value": 100,
"name": "展现"
}
]
},
{
"name": "实际",
"type": "funnel",
"x": "10%",
"width": "80%",
"maxSize": "80%",
"sort" : 'ascending', #数值排序形成正或倒漏斗
"itemStyle": {
"normal": {
"borderColor": "#fff",
"borderWidth": 2,
"label": {
"position": "inside",
"formatter": "{c}%",
"textStyle": {
"color": "#fff"
}
}
},
"emphasis": {
"label": {
"position": "inside",
"formatter": "{b}实际 : {c}%"
}
}
},
"data": [
{
"value": 30,
"name": "访问"
},
{
"value": 10,
"name": "咨询"
},
{
"value": 5,
"name": "订单"
},
{
"value": 50,
"name": "点击"
},
{
"value": 80,
"name": "展现"
}
]
}
]
};
树图
树图
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [
{
name: '上市公司交易场所分类',
children: [
{
"name": "深交所",
"value": 2690,
"children": [
{
"name": "深交所主板",
"value": 727
},
{
"name": "深交所中小板",
"value": 986
},
{
"name": "深交所创业板",
"value": 877
}
]
},
{
"name": "上交所",
"value": 2350,
"children": [
{
"name": "上交所",
"value": 2158
},
{
"name": "上交所科创板",
"value": 192
}
]
},
{
"name": "港交所",
"value": 2535,
"children": [
{
"name": "港交所主板",
"value": 2159
},
{
"name": "港交所创业板",
"value": 376
}
]
}
]}
],
top: '1%',
left: '20%',
bottom: '1%',
right: '20%',
symbolSize: 10,
edgeShape: 'polyline',
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 15
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
expandAndCollapse: true, #是否展开节点可以自定义到每一个节点中
animationDuration: 550,
animationDurationUpdate: 750,
initialTreeDepth: 3, #节点展开的个数
"roam": true, #可用鼠标拖拽及放大缩小
}
]
}
树形矩图
option= {
"title": {
"text": "上市公司交易场所分类",
"left": "center"
},
"tooltip": {
"show": true,
"formatter": "{a} : {b}<br/>公司个数 : {c}"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataZoom": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"series": [
{
"name": "交易市场",
"type": "treemap",
"show": true,
"label": {
"show": true,
"formatter": "{b}\n\n{c}"
},
"data": [
{
"name": "深交所",
"value": 2690,
"children": [
{
"name": "深交所主板",
"value": 727
},
{
"name": "深交所中小板",
"value": 986
},
{
"name": "深交所创业板",
"value": 877
}
]
},
{
"name": "上交所",
"value": 2350,
"children": [
{
"name": "上交所",
"value": 2158
},
{
"name": "上交所科创板",
"value": 192
}
]
},
{
"name": "港交所",
"value": 2535,
"children": [
{
"name": "港交所主板",
"value": 2159
},
{
"name": "港交所创业板",
"value": 376
}
]
}
]
}
]
}
