init2
This commit is contained in:
hh
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<container4 title="总体经营情况">
|
||||
<img src="./bottom1.png" style="width: 90%;display: block;margin: 0 auto">
|
||||
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||
</container4>
|
||||
</div>
|
||||
|
||||
@ -20,20 +22,187 @@ export default {
|
||||
container4,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
return {
|
||||
dateRange: [],
|
||||
chart: null,
|
||||
|
||||
option: {
|
||||
grid: {
|
||||
top: '5%',
|
||||
left: '3%',
|
||||
right: '40%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
right: 'center',
|
||||
data: ['收入', '利润', '目标完成'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '利润',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
itemStyle: {
|
||||
color: 'rgb(116,212,184)'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
data: [320, 332, 301, 334, 390, 330, 320],
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgb(170,202,253)'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '目标完成',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
itemStyle: {
|
||||
color: 'rgb(245,217,126)'
|
||||
},
|
||||
},
|
||||
{
|
||||
hoverAnimation: false,
|
||||
type: 'pie',
|
||||
radius: ['70%', '80%'],
|
||||
center: ['75%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
color: 'rgb(170,202,253)'
|
||||
},
|
||||
data: [
|
||||
{ value: 30, name: '收入' },
|
||||
],
|
||||
label: {
|
||||
|
||||
},
|
||||
labelLine: {
|
||||
showAbove: true,
|
||||
length: -40,
|
||||
length2: 160,
|
||||
// minTurnAngle: 90,
|
||||
// maxSurfaceAngle: 90
|
||||
}
|
||||
},
|
||||
{
|
||||
hoverAnimation: false,
|
||||
type: 'pie',
|
||||
radius: ['40%', '50%'],
|
||||
center: ['75%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
color: 'rgb(116,212,184)'
|
||||
},
|
||||
data: [
|
||||
{ value: 30, name: '利润' },
|
||||
],
|
||||
labelLine: {
|
||||
showAbove: true,
|
||||
length: -80,
|
||||
length2: 160,
|
||||
// minTurnAngle: 90,
|
||||
// maxSurfaceAngle: 90
|
||||
}
|
||||
// label: {
|
||||
// fontSize: 14,
|
||||
// position: 'outer',
|
||||
// alignTo: 'edge',
|
||||
// margin: 10,
|
||||
// },
|
||||
// labelLine: {
|
||||
// showAbove: true,
|
||||
// }
|
||||
},
|
||||
{
|
||||
hoverAnimation: false,
|
||||
type: 'pie',
|
||||
radius: ['55%', '65%'],
|
||||
center: ['75%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
color: 'rgb(245,217,126)',
|
||||
},
|
||||
data: [
|
||||
{ value: 30, name: '目标' },
|
||||
],
|
||||
labelLine: {
|
||||
showAbove: true,
|
||||
length: -60,
|
||||
length2: 145,
|
||||
}
|
||||
// label: {
|
||||
// fontSize: 14,
|
||||
// position: 'outer',
|
||||
// alignTo: 'edge',
|
||||
// margin: 10,
|
||||
// },
|
||||
// labelLine: {
|
||||
// showAbove: true,
|
||||
// }
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$refs.chart, 'macarons');
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<container4 title="总体生产情况">
|
||||
<img src="./bottom2.png" style="width: 90%;display: block;margin: 0 auto">
|
||||
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||
</container4>
|
||||
</div>
|
||||
|
||||
@ -13,6 +15,7 @@ import container4 from "../components/container4/index.vue";
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
import 'echarts-liquidfill'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'bottom1',
|
||||
@ -20,20 +23,326 @@ export default {
|
||||
container4,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
return {
|
||||
dateRange: [],
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
formatter: function (params, ticket, callback) {
|
||||
console.log(params)
|
||||
var res = params[0].name;
|
||||
for (var i = 0, l = params.length; i < l; i++) {
|
||||
res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
|
||||
}
|
||||
setTimeout(function () {
|
||||
// 仅为了模拟异步回调
|
||||
callback(ticket, res);
|
||||
}, 100)
|
||||
return 'loading...';
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['交付产品', '装药量'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '3%',
|
||||
right: '35%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
return Math.abs(value);//显示的数值都取绝对值
|
||||
}
|
||||
},
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
// data : ['0~5岁','5~10岁','10-30岁','30-50岁','50-70岁','70-100','100以上']
|
||||
data: ['2021.12', '2021.11', '2021.10', '2021.09', '2021.08'].reverse(),
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
title: {
|
||||
text: `${80}%`,
|
||||
left: "80%",
|
||||
top: "40%",
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontWeight: "normal",
|
||||
fontSize: 26,
|
||||
fontWeight: 'bold',
|
||||
color: "rgb(255,255,255)",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '交付产品',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
barWidth: 20,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
|
||||
}
|
||||
},
|
||||
data: [320, 302, 341, 374, 390],
|
||||
itemStyle: {
|
||||
color: 'rgb(115,208,183)'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '装药量',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: function (v) { return Math.abs(v.data) }
|
||||
}
|
||||
},
|
||||
|
||||
data: [-120, -132, -101, -134, -190],
|
||||
itemStyle: {
|
||||
color: 'rgb(151,186,255)'
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'liquidFill',
|
||||
radius: '40%',
|
||||
z: 1,
|
||||
center: ['50%', '50%'],
|
||||
amplitude: 20,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset:0,
|
||||
color: '#324791',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#449090',
|
||||
},
|
||||
],
|
||||
globalCoord: false,
|
||||
},
|
||||
data: [
|
||||
0.4,
|
||||
{
|
||||
value: 0.4,
|
||||
direction: 'left',
|
||||
},
|
||||
],
|
||||
backgroundStyle: {
|
||||
borderWidth: 1,
|
||||
color: 'transparent',
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '',
|
||||
},
|
||||
},
|
||||
outline: {
|
||||
show: true,
|
||||
itemStyle: {
|
||||
borderWidth: 0,
|
||||
},
|
||||
borderDistance: 0,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
type: "liquidFill", // 图表类型
|
||||
radius: "70%",
|
||||
center: ["80%", "50%"],
|
||||
data: [
|
||||
80 / 100,
|
||||
80 / 100,
|
||||
], // data个数代表波浪数
|
||||
backgroundStyle: {
|
||||
borderWidth: 1,
|
||||
color: "rgba(255,255,255,0)"
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false, //不显示label 用副标题代替了
|
||||
formatter: (0.5 * 100).toFixed(0) + "%",
|
||||
textStyle: {
|
||||
fontSize: 38,
|
||||
color: "black"
|
||||
}
|
||||
}
|
||||
},
|
||||
color: [ //color一定要是个数组 ，每一项对应一个波浪，可以给每个波浪单独配置颜色
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(82,157,240,0.1)"
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(104,222,219,0.5)"
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(82,157,240,0.1)"
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(104,222,219,0.5)"
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
},
|
||||
],
|
||||
outline: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
|
||||
//进度线
|
||||
{
|
||||
type: "pie",
|
||||
center: ["80%", "50%"],
|
||||
radius: ["75%", "80%"], //进度线粗细
|
||||
hoverAnimation: false,
|
||||
clockwise: false,
|
||||
data: [
|
||||
{
|
||||
name: "",
|
||||
value: 80, //进度
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 2,
|
||||
colorStops: [
|
||||
// !! 在此添加渐变过程色 !!
|
||||
{ offset: 0, color: "#68DEDB" },
|
||||
{ offset: 1, color: "#529DF0" }
|
||||
]
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
// color: "#5886f0"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
//画剩余的刻度圆环
|
||||
name: "",
|
||||
value: 100 - 80,
|
||||
clockwise: false,
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0)"
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0)"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$refs.chart, 'macarons');
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.4 MiB |
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<container2 title="生产总体走势">
|
||||
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
<span slot="snap">件</span>
|
||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||
</container2>
|
||||
</div>
|
||||
@ -28,6 +32,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dateRange: [],
|
||||
chart: null,
|
||||
option: {
|
||||
backgroundColor: '',
|
||||
@ -43,17 +48,26 @@ export default {
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
data: ['03-21', '03-22', '03-23', '03-24', '03-25', '03-26', '03-27'],
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 320
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
@ -62,6 +76,11 @@ export default {
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
}
|
||||
},
|
||||
series: [
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<container2 title="经营总体走势">
|
||||
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||
</container2>
|
||||
</div>
|
||||
@ -28,6 +30,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dateRange: [],
|
||||
chart: null,
|
||||
option: {
|
||||
backgroundColor: '',
|
||||
@ -43,7 +46,7 @@ export default {
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
right: '8%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
@ -53,7 +56,16 @@ export default {
|
||||
data: ['2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10'],
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 320
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
@ -66,6 +78,11 @@ export default {
|
||||
axisLabel: {
|
||||
formatter: "{value}%"
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
},
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user