提交
This commit is contained in:
153
src/components/Charts/BarChart.vue
Normal file
153
src/components/Charts/BarChart.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="mod-demo-echarts">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<div id="J_chartBarBox" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
chartBar: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChartBar()
|
||||
},
|
||||
activated () {
|
||||
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
|
||||
if (this.chartBar) {
|
||||
this.chartBar.resize()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 柱状图
|
||||
initChartBar () {
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'bar',
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'bar',
|
||||
stack: '广告',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'bar',
|
||||
stack: '广告',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'bar',
|
||||
stack: '广告',
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
type: 'bar',
|
||||
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
|
||||
markLine: {
|
||||
lineStyle: {
|
||||
normal: {
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
[{ type: 'min' }, { type: 'max' }]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '百度',
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
stack: '搜索引擎',
|
||||
data: [620, 732, 701, 734, 1090, 1130, 1120]
|
||||
},
|
||||
{
|
||||
name: '谷歌',
|
||||
type: 'bar',
|
||||
stack: '搜索引擎',
|
||||
data: [120, 132, 101, 134, 290, 230, 220]
|
||||
},
|
||||
{
|
||||
name: '必应',
|
||||
type: 'bar',
|
||||
stack: '搜索引擎',
|
||||
data: [60, 72, 71, 74, 190, 130, 110]
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
type: 'bar',
|
||||
stack: '搜索引擎',
|
||||
data: [62, 82, 91, 84, 109, 110, 120]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
|
||||
this.chartBar.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartBar.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mod-demo-echarts {
|
||||
> .el-alert {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
> .el-row {
|
||||
margin-top: -10px;
|
||||
margin-bottom: -10px;
|
||||
.el-col {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.chart-box {
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
155
src/components/Charts/Keyboard.vue
Normal file
155
src/components/Charts/Keyboard.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
|
||||
const xAxisData = []
|
||||
const data = []
|
||||
const data2 = []
|
||||
for (let i = 0; i < 50; i++) {
|
||||
xAxisData.push(i)
|
||||
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
|
||||
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
|
||||
}
|
||||
this.chart.setOption({
|
||||
backgroundColor: '#08263a',
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%'
|
||||
},
|
||||
xAxis: [{
|
||||
show: false,
|
||||
data: xAxisData
|
||||
}, {
|
||||
show: false,
|
||||
data: xAxisData
|
||||
}],
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 50,
|
||||
dimension: 0,
|
||||
inRange: {
|
||||
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#4a657a'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#08263f'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'back',
|
||||
type: 'bar',
|
||||
data: data2,
|
||||
z: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.4,
|
||||
barBorderRadius: 5,
|
||||
shadowBlur: 3,
|
||||
shadowColor: '#111'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: 'Simulate Shadow',
|
||||
type: 'line',
|
||||
data,
|
||||
z: 2,
|
||||
showSymbol: false,
|
||||
animationDelay: 0,
|
||||
animationEasing: 'linear',
|
||||
animationDuration: 1200,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: 'transparent'
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#08263a',
|
||||
shadowBlur: 50,
|
||||
shadowColor: '#000'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: 'front',
|
||||
type: 'bar',
|
||||
data,
|
||||
xAxisIndex: 1,
|
||||
z: 3,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5
|
||||
}
|
||||
}
|
||||
}],
|
||||
animationEasing: 'elasticOut',
|
||||
animationEasingUpdate: 'elasticOut',
|
||||
animationDelay (idx) {
|
||||
return idx * 20
|
||||
},
|
||||
animationDelayUpdate (idx) {
|
||||
return idx * 20
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
143
src/components/Charts/LineChart.1.vue
Normal file
143
src/components/Charts/LineChart.1.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div class="mod-demo-echarts">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<div :id="'J_chartLineBox' + nameFooter" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
showId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
nameFooter: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
lastDataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartLine: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showId: function (v) {
|
||||
if (v === this.id) {
|
||||
this.initChartLine()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChartLine()
|
||||
},
|
||||
activated () {
|
||||
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
|
||||
if (this.chartLine) {
|
||||
this.chartLine.resize()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 折线图
|
||||
initChartLine () {
|
||||
if (this.chartLine) {
|
||||
this.chartLine.dispose()
|
||||
}
|
||||
var option = {
|
||||
title: {
|
||||
text: this.name + this.nameFooter
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: [ '当前', '上一个单位' ]
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.dataList.map(item => {
|
||||
return item.time
|
||||
})
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '当前',
|
||||
type: 'line',
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
},
|
||||
{
|
||||
name: '上一个单位',
|
||||
type: 'line',
|
||||
data: this.lastDataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartLine = echarts.init(document.getElementById('J_chartLineBox' + this.nameFooter))
|
||||
this.chartLine.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartLine.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mod-demo-echarts {
|
||||
> .el-alert {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
> .el-row {
|
||||
margin-top: -10px;
|
||||
margin-bottom: -10px;
|
||||
.el-col {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.chart-box {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
139
src/components/Charts/LineChart.new.vue
Normal file
139
src/components/Charts/LineChart.new.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="mod-demo-echarts">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<div :id="'J_chartLineBox' + id" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
showId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
lastDataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartLine: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showId: function (v) {
|
||||
if (v === this.id) {
|
||||
this.initChartLine()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChartLine()
|
||||
},
|
||||
activated () {
|
||||
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
|
||||
if (this.chartLine) {
|
||||
this.chartLine.resize()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 折线图
|
||||
initChartLine () {
|
||||
if (this.chartLine) {
|
||||
this.chartLine.dispose()
|
||||
}
|
||||
var option = {
|
||||
title: {
|
||||
text: this.name
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: [ '当前', '上一个单位' ]
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.dataList.map(item => {
|
||||
return item.time
|
||||
})
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '当前',
|
||||
type: 'line',
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
},
|
||||
{
|
||||
name: '上一个单位',
|
||||
type: 'line',
|
||||
data: this.lastDataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartLine = echarts.init(document.getElementById('J_chartLineBox' + this.id))
|
||||
this.chartLine.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartLine.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mod-demo-echarts {
|
||||
> .el-alert {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
> .el-row {
|
||||
margin-top: -10px;
|
||||
margin-bottom: -10px;
|
||||
.el-col {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.chart-box {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
139
src/components/Charts/LineChart.vue
Normal file
139
src/components/Charts/LineChart.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="mod-demo-echarts">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<div :id="'J_chartLineBox' + id" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
showId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
lastDataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartLine: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showId: function (v) {
|
||||
if (v === this.id) {
|
||||
this.initChartLine()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChartLine()
|
||||
},
|
||||
activated () {
|
||||
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
|
||||
if (this.chartLine) {
|
||||
this.chartLine.resize()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 折线图
|
||||
initChartLine () {
|
||||
if (this.chartLine) {
|
||||
this.chartLine.dispose()
|
||||
}
|
||||
var option = {
|
||||
title: {
|
||||
text: this.name
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: [ '当前', '上一个单位' ]
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.dataList.map(item => {
|
||||
return item.time
|
||||
})
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '当前',
|
||||
type: 'line',
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
},
|
||||
{
|
||||
name: '上一个单位',
|
||||
type: 'line',
|
||||
data: this.lastDataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartLine = echarts.init(document.getElementById('J_chartLineBox' + this.id))
|
||||
this.chartLine.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartLine.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mod-demo-echarts {
|
||||
> .el-alert {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
> .el-row {
|
||||
margin-top: -10px;
|
||||
margin-bottom: -10px;
|
||||
.el-col {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.chart-box {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
227
src/components/Charts/LineMarker.vue
Normal file
227
src/components/Charts/LineMarker.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
|
||||
this.chart.setOption({
|
||||
backgroundColor: '#394056',
|
||||
title: {
|
||||
top: 20,
|
||||
text: 'Requests',
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 16,
|
||||
color: '#F1F1F3'
|
||||
},
|
||||
left: '1%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
icon: 'rect',
|
||||
itemWidth: 14,
|
||||
itemHeight: 5,
|
||||
itemGap: 13,
|
||||
data: ['CMCC', 'CTCC', 'CUCC'],
|
||||
right: '4%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#F1F1F3'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '(%)',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: 'CMCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(137, 189, 27, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(137, 189, 27, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(137,189,27)',
|
||||
borderColor: 'rgba(137,189,2,0.27)',
|
||||
borderWidth: 12
|
||||
|
||||
}
|
||||
},
|
||||
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
|
||||
}, {
|
||||
name: 'CTCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 136, 212, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(0, 136, 212, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(0,136,212)',
|
||||
borderColor: 'rgba(0,136,212,0.2)',
|
||||
borderWidth: 12
|
||||
|
||||
}
|
||||
},
|
||||
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
|
||||
}, {
|
||||
name: 'CUCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(219, 50, 51, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(219, 50, 51, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(219,50,51)',
|
||||
borderColor: 'rgba(219,50,51,0.2)',
|
||||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
423
src/components/Charts/MixChart.1.vue
Normal file
423
src/components/Charts/MixChart.1.vue
Normal file
@@ -0,0 +1,423 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
showId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Mix-Chart'
|
||||
},
|
||||
titleFooter: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
titleHeader: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
lastDataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
chartType: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null,
|
||||
series: []
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
watch: {
|
||||
dataList: {
|
||||
handler (val) {
|
||||
if (val) {
|
||||
this.series = []
|
||||
if (this.chartType.indexOf('柱状') >= 0) {
|
||||
this.series.push({
|
||||
name: '后室风扇1运行速度',
|
||||
type: 'bar',
|
||||
barMaxWidth: 35,
|
||||
barGap: '10%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(255,144,128,1)',
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
position: 'insideTop',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
this.series.push({
|
||||
name: '后室风扇2运行速度',
|
||||
type: 'bar',
|
||||
barMaxWidth: 35,
|
||||
barGap: '10%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,191,183,1)',
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
position: 'insideTop',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: this.lastDataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
}
|
||||
if (this.chartType.indexOf('折线') >= 0) {
|
||||
this.series.push({
|
||||
name: '后室风扇1运行速度',
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(255,144,128,1)',
|
||||
barBorderRadius: 0,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
this.series.push({
|
||||
name: '后室风扇2运行速度',
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,191,183,1)',
|
||||
barBorderRadius: 0,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: this.lastDataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
}
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
showId: {
|
||||
handler () {
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
chartType: {
|
||||
handler (val) {
|
||||
console.log(val)
|
||||
if (val.length) {
|
||||
this.series = []
|
||||
if (val.indexOf('柱状') >= 0) {
|
||||
this.series.push({
|
||||
name: '后室风扇1运行速度',
|
||||
type: 'bar',
|
||||
barMaxWidth: 35,
|
||||
barGap: '10%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(255,144,128,1)',
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
position: 'insideTop',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
this.series.push({
|
||||
name: '后室风扇2运行速度',
|
||||
type: 'bar',
|
||||
barMaxWidth: 35,
|
||||
barGap: '10%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,191,183,1)',
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
position: 'insideTop',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: this.lastDataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
}
|
||||
if (val.indexOf('折线') >= 0) {
|
||||
this.series.push({
|
||||
name: '后室风扇1运行速度',
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(255,144,128,1)',
|
||||
barBorderRadius: 0,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
this.series.push({
|
||||
name: '后室风扇2运行速度',
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,191,183,1)',
|
||||
barBorderRadius: 0,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: this.lastDataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
}
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
const xData = this.dataList.map(item => {
|
||||
return item.time
|
||||
})
|
||||
this.chart.setOption({
|
||||
backgroundColor: '#344b58',
|
||||
title: {
|
||||
text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.titleHeader + this.title + this.titleFooter,
|
||||
x: '20',
|
||||
top: '20',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '22'
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#90979c',
|
||||
fontSize: '16'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
borderWidth: 0,
|
||||
top: 150,
|
||||
bottom: 95,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
x: '5%',
|
||||
top: '10%',
|
||||
textStyle: {
|
||||
color: '#90979c'
|
||||
},
|
||||
data: this.series.map(item => {
|
||||
return item.name
|
||||
})
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#90979c'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
},
|
||||
data: xData
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#90979c'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
height: 30,
|
||||
xAxisIndex: [0],
|
||||
bottom: 30,
|
||||
start: 0,
|
||||
end: 100,
|
||||
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: this.series
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
355
src/components/Charts/MixChart.new.vue
Normal file
355
src/components/Charts/MixChart.new.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'MixChart'
|
||||
},
|
||||
showId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Mix-Chart'
|
||||
},
|
||||
titleFooter: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
titleHeader: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
lastDataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
chartType: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null,
|
||||
series: []
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
watch: {
|
||||
dataList: {
|
||||
handler (val) {
|
||||
if (val) {
|
||||
this.series = []
|
||||
if (this.chartType.indexOf('柱状') >= 0) {
|
||||
this.series.push({
|
||||
name: this.title + 'bar',
|
||||
type: 'bar',
|
||||
barMaxWidth: 35,
|
||||
barGap: '10%',
|
||||
color: '#5AD8A6',
|
||||
colorBy: 'data',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
},
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
}
|
||||
if (this.chartType.indexOf('折线') >= 0) {
|
||||
this.series.push({
|
||||
name: this.title + 'line',
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
colorBy: 'data',
|
||||
color: '#5B8FF9',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
},
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
}
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
showId: {
|
||||
handler () {
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
chartType: {
|
||||
handler (val) {
|
||||
console.log(val)
|
||||
if (val.length) {
|
||||
this.series = []
|
||||
if (val.indexOf('柱状') >= 0) {
|
||||
this.series.push({
|
||||
name: this.title + 'bar',
|
||||
type: 'bar',
|
||||
barMaxWidth: 35,
|
||||
barGap: '10%',
|
||||
color: '#5AD8A6',
|
||||
colorBy: 'data',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
},
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
}
|
||||
if (val.indexOf('折线') >= 0) {
|
||||
this.series.push({
|
||||
name: this.title + 'line',
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
color: '#5B8FF9',
|
||||
colorBy: 'data',
|
||||
barBorderRadius: 0,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
},
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
}
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.series = []
|
||||
if (this.chartType.indexOf('柱状') >= 0) {
|
||||
this.series.push({
|
||||
name: this.title + 'bar',
|
||||
type: 'bar',
|
||||
barMaxWidth: 35,
|
||||
barGap: '10%',
|
||||
color: '#5AD8A6',
|
||||
colorBy: 'data',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
},
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
}
|
||||
if (this.chartType.indexOf('折线') >= 0) {
|
||||
this.series.push({
|
||||
name: this.title + 'line',
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
color: '#5B8FF9',
|
||||
colorBy: 'data',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
},
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
}
|
||||
this.initChart()
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
const xData = this.dataList.map(item => {
|
||||
return moment(item.time).format('M-D HH:mm')
|
||||
})
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.titleHeader + this.title + this.titleFooter,
|
||||
x: '10',
|
||||
top: '10',
|
||||
fontSize: '18',
|
||||
subtextStyle: {
|
||||
color: '#90979c',
|
||||
fontSize: '16'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
borderWidth: 0,
|
||||
top: 100,
|
||||
bottom: 100,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
x: 20,
|
||||
top: 55,
|
||||
textStyle: {
|
||||
color: '#90979c'
|
||||
},
|
||||
data: this.series.map(item => {
|
||||
console.log(item)
|
||||
return this.title + item.type
|
||||
})
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#90979c'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 45
|
||||
},
|
||||
data: xData
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
// splitLine: {
|
||||
// show: false
|
||||
// },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#90979c'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
height: 30,
|
||||
xAxisIndex: [0],
|
||||
bottom: 10,
|
||||
start: 0,
|
||||
end: 100,
|
||||
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: this.series
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
373
src/components/Charts/MixChart.vue
Normal file
373
src/components/Charts/MixChart.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
showId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Mix-Chart'
|
||||
},
|
||||
titleFooter: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
titleHeader: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
lastDataList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
chartType: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null,
|
||||
series: []
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
watch: {
|
||||
dataList: {
|
||||
handler (val) {
|
||||
if (val) {
|
||||
this.series = []
|
||||
if (this.chartType.indexOf('柱状') >= 0) {
|
||||
this.series.push({
|
||||
name: '本' + this.title,
|
||||
type: 'bar',
|
||||
barMaxWidth: 35,
|
||||
barGap: '10%',
|
||||
color: '#5AD8A6',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
},
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
this.series.push({
|
||||
name: '上' + this.title,
|
||||
type: 'bar',
|
||||
barMaxWidth: 35,
|
||||
barGap: '10%',
|
||||
color: '#5B8FF9',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
},
|
||||
data: this.lastDataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
}
|
||||
if (this.chartType.indexOf('折线') >= 0) {
|
||||
this.series.push({
|
||||
name: '本' + this.title,
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
color: '#5B8FF9',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
},
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
this.series.push({
|
||||
name: '上' + this.title,
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
color: '#5AD8A6',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
},
|
||||
data: this.lastDataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
}
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
showId: {
|
||||
handler () {
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
chartType: {
|
||||
handler (val) {
|
||||
console.log(val)
|
||||
if (val.length) {
|
||||
this.series = []
|
||||
if (val.indexOf('柱状') >= 0) {
|
||||
this.series.push({
|
||||
name: '本' + this.title,
|
||||
type: 'bar',
|
||||
barMaxWidth: 35,
|
||||
barGap: '10%',
|
||||
color: '#5B8FF9',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
},
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
this.series.push({
|
||||
name: '上' + this.title,
|
||||
type: 'bar',
|
||||
barMaxWidth: 35,
|
||||
barGap: '10%',
|
||||
color: '#5AD8A6',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
},
|
||||
data: this.lastDataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
}
|
||||
if (val.indexOf('折线') >= 0) {
|
||||
this.series.push({
|
||||
name: '本' + this.title,
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
color: '#5B8FF9',
|
||||
barBorderRadius: 0,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
},
|
||||
data: this.dataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
this.series.push({
|
||||
name: '上' + this.title,
|
||||
type: 'line',
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
color: '#5AD8A6',
|
||||
barBorderRadius: 0,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter (p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
},
|
||||
data: this.lastDataList.map(item => {
|
||||
return item.value
|
||||
})
|
||||
})
|
||||
}
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
const xData = this.dataList.map(item => {
|
||||
return item.time
|
||||
})
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.titleHeader + this.title + this.titleFooter,
|
||||
x: '10',
|
||||
top: '10',
|
||||
fontSize: '18',
|
||||
subtextStyle: {
|
||||
color: '#90979c',
|
||||
fontSize: '16'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
borderWidth: 0,
|
||||
top: 100,
|
||||
bottom: 70,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
x: 20,
|
||||
top: 55,
|
||||
textStyle: {
|
||||
color: '#90979c'
|
||||
},
|
||||
data: this.series.map(item => {
|
||||
return item.name
|
||||
})
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#90979c'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
},
|
||||
data: xData
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
// splitLine: {
|
||||
// show: false
|
||||
// },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#90979c'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
height: 30,
|
||||
xAxisIndex: [0],
|
||||
bottom: 10,
|
||||
start: 0,
|
||||
end: 100,
|
||||
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: this.series
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
122
src/components/Charts/PieChart.vue
Normal file
122
src/components/Charts/PieChart.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="mod-demo-echarts">
|
||||
<div id="J_chartPieBox" class="chart-box"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
chartPie: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChartPie()
|
||||
},
|
||||
activated () {
|
||||
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
|
||||
if (this.chartPie) {
|
||||
this.chartPie.resize()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 饼状图
|
||||
initChartPie () {
|
||||
var option = {
|
||||
backgroundColor: '#2c343c',
|
||||
title: {
|
||||
text: 'Customized Pie',
|
||||
left: 'center',
|
||||
top: 20,
|
||||
textStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 80,
|
||||
max: 600,
|
||||
inRange: {
|
||||
colorLightness: [0, 1]
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{ value: 335, name: '直接访问' },
|
||||
{ value: 310, name: '邮件营销' },
|
||||
{ value: 274, name: '联盟广告' },
|
||||
{ value: 235, name: '视频广告' },
|
||||
{ value: 400, name: '搜索引擎' }
|
||||
].sort(function (a, b) { return a.value - b.value }),
|
||||
roseType: 'radius',
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
},
|
||||
smooth: 0.2,
|
||||
length: 10,
|
||||
length2: 20
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#c23531',
|
||||
shadowBlur: 200,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
animationType: 'scale',
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
|
||||
this.chartPie.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartPie.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mod-demo-echarts {
|
||||
> .el-alert {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
> .el-row {
|
||||
margin-top: -10px;
|
||||
margin-bottom: -10px;
|
||||
.el-col {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.chart-box {
|
||||
min-height: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
src/components/Charts/RingChart.vue
Normal file
124
src/components/Charts/RingChart.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2021-11-22 19:03:01
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-12-16 19:25:02
|
||||
* @Description: file content
|
||||
* @FilePath: \mt-qj-wms-ui\src\components\Charts\RingChart.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="mod-demo-echarts">
|
||||
<div :id="'J_chartRingBox' + id" class="chart-box"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
data: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartRing: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChartRing()
|
||||
},
|
||||
activated () {
|
||||
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
|
||||
if (this.chartRing) {
|
||||
this.chartRing.resize()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 折线图
|
||||
initChartRing () {
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{d}%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['55%', '90%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
scale: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: this.data,
|
||||
name: this.name,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#5A55D8'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: (100 - this.data),
|
||||
name: '其他',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(231, 231, 231, 1)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartRing = echarts.init(document.getElementById('J_chartRingBox' + this.id))
|
||||
this.chartRing.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartRing.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mod-demo-echarts {
|
||||
> .el-alert {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
> .el-row {
|
||||
margin-top: -10px;
|
||||
margin-bottom: -10px;
|
||||
.el-col {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.chart-box {
|
||||
min-height: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
186
src/components/Charts/ScatterChart.vue
Normal file
186
src/components/Charts/ScatterChart.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="mod-demo-echarts">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<div id="J_chartScatterBox" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
chartScatter: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChartScatter()
|
||||
},
|
||||
activated () {
|
||||
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
|
||||
if (this.chartScatter) {
|
||||
this.chartScatter.resize()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 散点图
|
||||
initChartScatter () {
|
||||
var option = {
|
||||
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
|
||||
{ offset: 0, color: '#f7f8fa' },
|
||||
{ offset: 1, color: '#cdd0d5' }
|
||||
]),
|
||||
title: {
|
||||
text: '1990 与 2015 年各国家人均寿命与 GDP'
|
||||
},
|
||||
legend: {
|
||||
right: 10,
|
||||
data: ['1990', '2015']
|
||||
},
|
||||
xAxis: {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
scale: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '1990',
|
||||
data: [
|
||||
[28604, 77, 17096869, 'Australia', 1990],
|
||||
[31163, 77.4, 27662440, 'Canada', 1990],
|
||||
[1516, 68, 1154605773, 'China', 1990],
|
||||
[13670, 74.7, 10582082, 'Cuba', 1990],
|
||||
[28599, 75, 4986705, 'Finland', 1990],
|
||||
[29476, 77.1, 56943299, 'France', 1990],
|
||||
[31476, 75.4, 78958237, 'Germany', 1990],
|
||||
[28666, 78.1, 254830, 'Iceland', 1990],
|
||||
[1777, 57.7, 870601776, 'India', 1990],
|
||||
[29550, 79.1, 122249285, 'Japan', 1990],
|
||||
[2076, 67.9, 20194354, 'North Korea', 1990],
|
||||
[12087, 72, 42972254, 'South Korea', 1990],
|
||||
[24021, 75.4, 3397534, 'New Zealand', 1990],
|
||||
[43296, 76.8, 4240375, 'Norway', 1990],
|
||||
[10088, 70.8, 38195258, 'Poland', 1990],
|
||||
[19349, 69.6, 147568552, 'Russia', 1990],
|
||||
[10670, 67.3, 53994605, 'Turkey', 1990],
|
||||
[26424, 75.7, 57110117, 'United Kingdom', 1990],
|
||||
[37062, 75.4, 252847810, 'United States', 1990]
|
||||
],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return param.data[3]
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(120, 36, 50, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
||||
{ offset: 0, color: 'rgb(251, 118, 123)' },
|
||||
{ offset: 1, color: 'rgb(204, 46, 72)' }
|
||||
])
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '2015',
|
||||
data: [
|
||||
[44056, 81.8, 23968973, 'Australia', 2015],
|
||||
[43294, 81.7, 35939927, 'Canada', 2015],
|
||||
[13334, 76.9, 1376048943, 'China', 2015],
|
||||
[21291, 78.5, 11389562, 'Cuba', 2015],
|
||||
[38923, 80.8, 5503457, 'Finland', 2015],
|
||||
[37599, 81.9, 64395345, 'France', 2015],
|
||||
[44053, 81.1, 80688545, 'Germany', 2015],
|
||||
[42182, 82.8, 329425, 'Iceland', 2015],
|
||||
[5903, 66.8, 1311050527, 'India', 2015],
|
||||
[36162, 83.5, 126573481, 'Japan', 2015],
|
||||
[1390, 71.4, 25155317, 'North Korea', 2015],
|
||||
[34644, 80.7, 50293439, 'South Korea', 2015],
|
||||
[34186, 80.6, 4528526, 'New Zealand', 2015],
|
||||
[64304, 81.6, 5210967, 'Norway', 2015],
|
||||
[24787, 77.3, 38611794, 'Poland', 2015],
|
||||
[23038, 73.13, 143456918, 'Russia', 2015],
|
||||
[19360, 76.5, 78665830, 'Turkey', 2015],
|
||||
[38225, 81.4, 64715810, 'United Kingdom', 2015],
|
||||
[53354, 79.1, 321773631, 'United States', 2015]
|
||||
],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return param.data[3]
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(25, 100, 150, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
||||
{ offset: 0, color: 'rgb(129, 227, 238)' },
|
||||
{ offset: 1, color: 'rgb(25, 183, 207)' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartPie = echarts.init(document.getElementById('J_chartScatterBox'))
|
||||
this.chartPie.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartPie.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mod-demo-echarts {
|
||||
> .el-alert {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
> .el-row {
|
||||
margin-top: -10px;
|
||||
margin-bottom: -10px;
|
||||
.el-col {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.chart-box {
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
src/components/Charts/mixins/resize.js
Normal file
64
src/components/Charts/mixins/resize.js
Normal file
@@ -0,0 +1,64 @@
|
||||
/*
|
||||
* @Author: gtz
|
||||
* @Date: 2021-11-22 16:15:52
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-22 19:17:01
|
||||
* @Description: file content
|
||||
* @FilePath: \mt-qj-wms-ui\src\components\Charts\mixins\resize.js
|
||||
*/
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initListener()
|
||||
},
|
||||
activated () {
|
||||
if (!this.$_resizeHandler) {
|
||||
// avoid duplication init
|
||||
this.initListener()
|
||||
}
|
||||
|
||||
// when keep-alive chart activated, auto resize
|
||||
this.resize()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.destroyListener()
|
||||
},
|
||||
deactivated () {
|
||||
this.destroyListener()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_sidebarResizeHandler (e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
initListener () {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
this.resize()
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
destroyListener () {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
this.$_resizeHandler = null
|
||||
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
resize () {
|
||||
const { chart } = this
|
||||
chart && chart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
51
src/components/icon-svg/index.vue
Normal file
51
src/components/icon-svg/index.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<svg
|
||||
:class="getClassName"
|
||||
:width="width"
|
||||
:height="height"
|
||||
aria-hidden="true">
|
||||
<use :xlink:href="getName"></use>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'icon-svg',
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
type: String
|
||||
},
|
||||
height: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getName () {
|
||||
return `#icon-${this.name}`
|
||||
},
|
||||
getClassName () {
|
||||
return [
|
||||
'icon-svg',
|
||||
`icon-svg__${this.name}`,
|
||||
this.className && /\S/.test(this.className) ? `${this.className}` : ''
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.icon-svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
84
src/components/table-tree-column/index.vue
Normal file
84
src/components/table-tree-column/index.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<el-table-column :prop="prop" v-bind="$attrs">
|
||||
<template slot-scope="scope">
|
||||
<span @click.prevent="toggleHandle(scope.$index, scope.row)" :style="childStyles(scope.row)">
|
||||
<i :class="iconClasses(scope.row)" :style="iconStyles(scope.row)"></i>
|
||||
{{ scope.row[prop] }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import isArray from 'lodash/isArray'
|
||||
export default {
|
||||
name: 'table-tree-column',
|
||||
props: {
|
||||
prop: {
|
||||
type: String
|
||||
},
|
||||
treeKey: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
parentKey: {
|
||||
type: String,
|
||||
default: 'parentId'
|
||||
},
|
||||
levelKey: {
|
||||
type: String,
|
||||
default: '_level'
|
||||
},
|
||||
childKey: {
|
||||
type: String,
|
||||
default: 'children'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
childStyles (row) {
|
||||
return { 'padding-left': (row[this.levelKey] > 1 ? row[this.levelKey] * 7 : 0) + 'px' }
|
||||
},
|
||||
iconClasses (row) {
|
||||
return [ !row._expanded ? 'el-icon-caret-right' : 'el-icon-caret-bottom' ]
|
||||
},
|
||||
iconStyles (row) {
|
||||
return { 'visibility': this.hasChild(row) ? 'visible' : 'hidden' }
|
||||
},
|
||||
hasChild (row) {
|
||||
return (isArray(row[this.childKey]) && row[this.childKey].length >= 1) || false
|
||||
},
|
||||
// 切换处理
|
||||
toggleHandle (index, row) {
|
||||
if (this.hasChild(row)) {
|
||||
var data = this.$parent.store.states.data.slice(0)
|
||||
data[index]._expanded = !data[index]._expanded
|
||||
if (data[index]._expanded) {
|
||||
data = data.splice(0, index + 1).concat(row[this.childKey]).concat(data)
|
||||
} else {
|
||||
data = this.removeChildNode(data, row[this.treeKey])
|
||||
}
|
||||
this.$parent.store.commit('setData', data)
|
||||
this.$nextTick(() => {
|
||||
this.$parent.doLayout()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 移除子节点
|
||||
removeChildNode (data, parentId) {
|
||||
var parentIds = isArray(parentId) ? parentId : [parentId]
|
||||
if (parentId.length <= 0) {
|
||||
return data
|
||||
}
|
||||
var ids = []
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (parentIds.indexOf(data[i][this.parentKey]) !== -1 && parentIds.indexOf(data[i][this.treeKey]) === -1) {
|
||||
data[i]._expanded = false
|
||||
ids.push(data.splice(i, 1)[0][this.treeKey])
|
||||
i--
|
||||
}
|
||||
}
|
||||
return this.removeChildNode(data, ids)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user