348 lines
9.0 KiB
Vue
348 lines
9.0 KiB
Vue
<template>
|
|
<div>
|
|
<container4 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>
|
|
</container4>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
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',
|
|
components: {
|
|
container4,
|
|
},
|
|
data () {
|
|
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> |