652 lines
14 KiB
JavaScript
652 lines
14 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: {
|
|
textStyle: {
|
|
color: "white"
|
|
}
|
|
|
|
|
|
},
|
|
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: ['访客人数', '下单人数', '支付人数'],
|
|
textStyle: {
|
|
color: "white"
|
|
}
|
|
// 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]
|
|
},
|
|
|
|
|
|
]
|
|
},
|
|
|
|
/*******townDetail**********/
|
|
// 订单金额
|
|
orderAmount: {
|
|
color: [
|
|
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{ offset: 1, color: '#57D3ED' },
|
|
{ offset: 0, color: 'transparent' },
|
|
])
|
|
, new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{ offset: 1, color: '#4156C2' },
|
|
{ offset: 0, color: 'transparent' },
|
|
])
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
// color: transparent;
|
|
|
|
legend: {},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时', '20-0时']
|
|
}
|
|
],
|
|
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, 322, 222],
|
|
// itemStyle: {
|
|
// borderWidth: 1,
|
|
// borderColor: "#384FB4",
|
|
// },
|
|
|
|
backgroundStyle: {
|
|
color: ['red']
|
|
}
|
|
},
|
|
{
|
|
name: '今日订单额',
|
|
type: 'bar',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [120, 132, 101, 134, 90, 230, 210, 366],
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
// 成交用户数据
|
|
transactionUsersTown: {
|
|
color: ['#015989', '#583936', '#416979'],
|
|
title: {
|
|
text: ''
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['访客人数', '下单人数', '支付人数',]
|
|
// 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: '#2752A6'
|
|
},
|
|
{
|
|
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: '#005685'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#355969'
|
|
}
|
|
])
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [320, 132, 201, 334, 190, 130, 220]
|
|
},
|
|
|
|
|
|
]
|
|
},
|
|
// 订单数据
|
|
orderData: {
|
|
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
boundaryGap: [0, 0.01],
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',//背景色为虚线,
|
|
color: '#256980'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['当日订单数', '当月订单数'],
|
|
|
|
},
|
|
series: [
|
|
{
|
|
barWidth: 15,
|
|
barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
|
|
barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
|
|
data: [120, 200],
|
|
type: 'bar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: function (params) {
|
|
var colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
|
{ offset: 1, color: '#0298E5' },
|
|
{ offset: 0, color: 'transparent' },
|
|
]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
|
{ offset: 1, color: '#4358C8' },
|
|
{ offset: 0, color: 'transparent' },
|
|
])];
|
|
return colorList[params.dataIndex]
|
|
},
|
|
borderColor: ['blue']
|
|
|
|
},
|
|
borderWidth: 2,
|
|
borderColor: "red",
|
|
},
|
|
|
|
}
|
|
]
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
export default optins |