362 lines
10 KiB
JavaScript
362 lines
10 KiB
JavaScript
|
import * as echarts from 'echarts';
|
||
|
|
|
||
|
|
let angle = 0;//角度，用来做简单的动画效果的
|
||
|
|
let value = 78; //图上角度数据
|
||
|
|
let result = [
|
||
|
|
{ name: '制造业', value: 5713,itemStyle: {color: '#FF7734'}},
|
||
|
|
{ name: '信息传输、软件和信息技术服务业', value: 3022 ,itemStyle: {color: '#FFC700'}},
|
||
|
|
{ name: '科学研究和技术服务业', value: 2647 ,itemStyle: {color: '#34FFE7'}},
|
||
|
|
{ name: '金融业', value: 2291 },
|
||
|
|
{ name: '批发和零售业', value: 1946 },
|
||
|
|
{ name: '交通运输、仓储和邮政业', value: 1812 },
|
||
|
|
{ name: '教育', value: 1756 },
|
||
|
|
{ name: '建筑业', value: 1712 },
|
||
|
|
{ name: '房地产业', value: 1666 },
|
||
|
|
{ name: '水利、环境和公共设施管理业', value: 1621 }
|
||
|
|
]
|
||
|
|
|
||
|
|
const optins={
|
||
|
|
// 用户图表
|
||
|
|
userChartOption : {
|
||
|
|
color:[
|
||
|
|
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
|
|
{ offset: 1, color: 'transparent' },
|
||
|
|
{ offset: 0, color: '#0081C3' },
|
||
|
|
])
|
||
|
|
, new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
|
|
{ offset: 1, color: 'transparent' },
|
||
|
|
{ offset: 0, color: '#3E54BF' },
|
||
|
|
]) , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
|
|
{ offset: 1, color: 'transparent' },
|
||
|
|
{ offset: 0, color: '#4DBFD9' },
|
||
|
|
]) ,
|
||
|
|
],
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// color: transparent;
|
||
|
|
|
||
|
|
legend: {},
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '3%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
data: ['11.01', '11-02', '11-03', '11-04', '11-05',]
|
||
|
|
}
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
splitLine:{
|
||
|
|
show:true,
|
||
|
|
lineStyle:{
|
||
|
|
type:'dashed',//背景色为虚线,
|
||
|
|
color:'#256980'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '新增用户数量',
|
||
|
|
type: 'bar',
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: [320, 332, 301, 334, 390, 330, 320],
|
||
|
|
itemStyle: {
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: "#384FB4",
|
||
|
|
},
|
||
|
|
|
||
|
|
backgroundStyle: {
|
||
|
|
color: ['red']
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '访问用户数量',
|
||
|
|
type: 'bar',
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||
|
|
itemStyle: {
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: "#3E54BF",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '累计用户数量',
|
||
|
|
type: 'bar',
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: [220, 182, 191, 234, 290, 330, 310],
|
||
|
|
itemStyle: {
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: "#4EC1DB",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
]
|
||
|
|
},
|
||
|
|
// 地方店铺数量统计
|
||
|
|
storeNum:{
|
||
|
|
backgroundColor:"#061740",
|
||
|
|
title: {
|
||
|
|
text: '{a|'+ 70 +'}{c|%}',
|
||
|
|
x: 'center',
|
||
|
|
y: 'center',
|
||
|
|
textStyle: {
|
||
|
|
rich:{
|
||
|
|
a: {
|
||
|
|
fontSize: 10,
|
||
|
|
color: '#ffffff',
|
||
|
|
fontWeight: 'bold'
|
||
|
|
},
|
||
|
|
c: {
|
||
|
|
fontSize: 10,
|
||
|
|
color: '#ffffff',
|
||
|
|
fontWeight: 'normal'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
//内环
|
||
|
|
{
|
||
|
|
name: "",
|
||
|
|
type: 'custom',
|
||
|
|
coordinateSystem: "none",
|
||
|
|
renderItem: function(params, api) {
|
||
|
|
return {
|
||
|
|
type: 'arc',
|
||
|
|
shape: {
|
||
|
|
cx: api.getWidth() / 2,
|
||
|
|
cy: api.getHeight() / 2,
|
||
|
|
r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65,
|
||
|
|
startAngle: (0+-angle) * Math.PI / 180,
|
||
|
|
endAngle: (360+-angle) * Math.PI / 180
|
||
|
|
},
|
||
|
|
style: {
|
||
|
|
stroke: "#0CD3DB",
|
||
|
|
fill: "transparent",
|
||
|
|
lineWidth: 0.5
|
||
|
|
},
|
||
|
|
silent: true
|
||
|
|
};
|
||
|
|
},
|
||
|
|
data: [0]
|
||
|
|
},
|
||
|
|
//外环
|
||
|
|
{
|
||
|
|
name: '',
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['85%', '70%'],
|
||
|
|
silent: true,
|
||
|
|
clockwise: true,
|
||
|
|
startAngle: 90,
|
||
|
|
z: 0,
|
||
|
|
zlevel: 0,
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
position: "center",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: 60,
|
||
|
|
name: "",
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
//外环发光
|
||
|
|
borderWidth: 0.5,
|
||
|
|
shadowBlur: 20,
|
||
|
|
borderColor: '#4bf3f9',
|
||
|
|
shadowColor: '#9bfeff',
|
||
|
|
color: { // 圆环的颜色
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0,
|
||
|
|
color: '#4bf3f9', // 0% 处的颜色
|
||
|
|
}, {
|
||
|
|
offset: 1,
|
||
|
|
color: '#4bf3f9', // 100% 处的颜色
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 100-70,
|
||
|
|
name: "",
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: "#173164"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
]
|
||
|
|
},
|
||
|
|
// 成交用户统计信息表
|
||
|
|
|
||
|
|
transactionUsers : {
|
||
|
|
color: ['#015989', '#583936', '#416979'],
|
||
|
|
title: {
|
||
|
|
text: ''
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'cross',
|
||
|
|
label: {
|
||
|
|
backgroundColor: '#6a7985'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: ['访客人数', '下单人数', '支付人数', 'Line 4', 'Line 5']
|
||
|
|
// data: ['访客人数','下单人数','支付人数']
|
||
|
|
|
||
|
|
},
|
||
|
|
toolbox: {
|
||
|
|
feature: {
|
||
|
|
saveAsImage: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '3%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
|
|
}
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
splitLine:{
|
||
|
|
show:true,
|
||
|
|
lineStyle:{
|
||
|
|
type:'dashed',//背景色为虚线,
|
||
|
|
color:'#256980'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '访客人数',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
smooth: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 0
|
||
|
|
},
|
||
|
|
showSymbol: false,
|
||
|
|
areaStyle: {
|
||
|
|
opacity: 0.8,
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: '#18394A'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#2885A4'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: [140, 232, 101, 264, 90, 340, 250]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '下单人数',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
smooth: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 0
|
||
|
|
},
|
||
|
|
showSymbol: false,
|
||
|
|
areaStyle: {
|
||
|
|
opacity: 0.8,
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: '#004367'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#005886'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: [120, 282, 111, 234, 220, 340, 310]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '支付人数',
|
||
|
|
type: 'line',
|
||
|
|
stack: 'Total',
|
||
|
|
smooth: true,
|
||
|
|
lineStyle: {
|
||
|
|
width: 0
|
||
|
|
},
|
||
|
|
showSymbol: false,
|
||
|
|
areaStyle: {
|
||
|
|
opacity: 0.8,
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: '#5A3A37'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#355969'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
focus: 'series'
|
||
|
|
},
|
||
|
|
data: [320, 132, 201, 334, 190, 130, 220]
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
]
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
export default optins
|