|
@@ -1,291 +1,294 @@
|
|
<template>
|
|
<template>
|
|
- <div class="chart" :id="id"></div>
|
|
|
|
|
|
+ <div class="chart"
|
|
|
|
+ :id="id"></div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import util from "@/helper/util.js";
|
|
|
|
-import partten from "@/helper/partten.js";
|
|
|
|
-import * as echarts from "echarts";
|
|
|
|
|
|
+import util from '@/helper/util.js'
|
|
|
|
+import partten from '@/helper/partten.js'
|
|
|
|
+import * as echarts from 'echarts'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
- name: "double-line-chart",
|
|
|
|
- componentName: "double-line-chart",
|
|
|
|
|
|
+ name: 'double-line-chart',
|
|
|
|
+ componentName: 'double-line-chart',
|
|
props: {
|
|
props: {
|
|
width: {
|
|
width: {
|
|
type: String,
|
|
type: String,
|
|
- default: "100%",
|
|
|
|
|
|
+ default: '100%'
|
|
},
|
|
},
|
|
height: {
|
|
height: {
|
|
type: String,
|
|
type: String,
|
|
- default: "13.889vh",
|
|
|
|
|
|
+ default: '13.889vh'
|
|
},
|
|
},
|
|
// 传入数据
|
|
// 传入数据
|
|
list: {
|
|
list: {
|
|
type: Array,
|
|
type: Array,
|
|
default: () => [
|
|
default: () => [
|
|
{
|
|
{
|
|
- title: "绿线",
|
|
|
|
|
|
+ title: '绿线',
|
|
smooth: true,
|
|
smooth: true,
|
|
value: [
|
|
value: [
|
|
{
|
|
{
|
|
- text: "",
|
|
|
|
- value: 0,
|
|
|
|
|
|
+ text: '',
|
|
|
|
+ value: 0
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "0:00",
|
|
|
|
- value: 20,
|
|
|
|
|
|
+ text: '0:00',
|
|
|
|
+ value: 20
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "10:00",
|
|
|
|
- value: 1,
|
|
|
|
|
|
+ text: '10:00',
|
|
|
|
+ value: 1
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "11:00",
|
|
|
|
- value: 40,
|
|
|
|
|
|
+ text: '11:00',
|
|
|
|
+ value: 40
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "12:00",
|
|
|
|
- value: 10,
|
|
|
|
|
|
+ text: '12:00',
|
|
|
|
+ value: 10
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "13:00",
|
|
|
|
- value: 15,
|
|
|
|
|
|
+ text: '13:00',
|
|
|
|
+ value: 15
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "14:00",
|
|
|
|
- value: 30,
|
|
|
|
|
|
+ text: '14:00',
|
|
|
|
+ value: 30
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "15:00",
|
|
|
|
- value: 40,
|
|
|
|
|
|
+ text: '15:00',
|
|
|
|
+ value: 40
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "",
|
|
|
|
- value: 10,
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
|
|
+ text: '',
|
|
|
|
+ value: 10
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: "黄线",
|
|
|
|
|
|
+ title: '黄线',
|
|
smooth: true,
|
|
smooth: true,
|
|
value: [
|
|
value: [
|
|
{
|
|
{
|
|
- text: "",
|
|
|
|
- value: 0,
|
|
|
|
|
|
+ text: '',
|
|
|
|
+ value: 0
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "0:00",
|
|
|
|
- value: 40,
|
|
|
|
|
|
+ text: '0:00',
|
|
|
|
+ value: 40
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "10:00",
|
|
|
|
- value: 20,
|
|
|
|
|
|
+ text: '10:00',
|
|
|
|
+ value: 20
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "11:00",
|
|
|
|
- value: 20,
|
|
|
|
|
|
+ text: '11:00',
|
|
|
|
+ value: 20
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "12:00",
|
|
|
|
- value: 10,
|
|
|
|
|
|
+ text: '12:00',
|
|
|
|
+ value: 10
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "13:00",
|
|
|
|
- value: 40,
|
|
|
|
|
|
+ text: '13:00',
|
|
|
|
+ value: 40
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "14:00",
|
|
|
|
- value: 50,
|
|
|
|
|
|
+ text: '14:00',
|
|
|
|
+ value: 50
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "15:00",
|
|
|
|
- value: 40,
|
|
|
|
|
|
+ text: '15:00',
|
|
|
|
+ value: 40
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- text: "",
|
|
|
|
- value: 10,
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
|
|
+ text: '',
|
|
|
|
+ value: 10
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
},
|
|
},
|
|
// 单位
|
|
// 单位
|
|
unit: {
|
|
unit: {
|
|
type: String,
|
|
type: String,
|
|
- default: "",
|
|
|
|
|
|
+ default: ''
|
|
},
|
|
},
|
|
showLegend: {
|
|
showLegend: {
|
|
type: Boolean,
|
|
type: Boolean,
|
|
- default: false,
|
|
|
|
- },
|
|
|
|
|
|
+ default: false
|
|
|
|
+ }
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- id: "",
|
|
|
|
|
|
+ id: '',
|
|
chart: null,
|
|
chart: null,
|
|
- color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16", "#1DA0D7","#DD5044"],
|
|
|
|
- newlist: null,
|
|
|
|
- };
|
|
|
|
|
|
+ color: ['#05bb4c', '#f8de5b', '#4b55ae', '#fa8c16', '#1DA0D7', '#DD5044'],
|
|
|
|
+ newlist: null
|
|
|
|
+ }
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
list: {
|
|
list: {
|
|
handler(newValue, oldValue) {
|
|
handler(newValue, oldValue) {
|
|
- console.warn(newValue);
|
|
|
|
- this.newlist = newValue;
|
|
|
|
|
|
+ console.warn(newValue)
|
|
|
|
+ this.newlist = newValue
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
- this.initChart();
|
|
|
|
- });
|
|
|
|
|
|
+ this.initChart()
|
|
|
|
+ })
|
|
},
|
|
},
|
|
- deep: true,
|
|
|
|
- },
|
|
|
|
|
|
+ deep: true
|
|
|
|
+ }
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
colorValue() {
|
|
colorValue() {
|
|
- return partten.getColor(this.color);
|
|
|
|
|
|
+ return partten.getColor(this.color)
|
|
},
|
|
},
|
|
datas() {
|
|
datas() {
|
|
- return this.newlist.map((t) => {
|
|
|
|
- return t.value;
|
|
|
|
- });
|
|
|
|
|
|
+ return this.newlist.map(t => {
|
|
|
|
+ return t.value
|
|
|
|
+ })
|
|
},
|
|
},
|
|
legend() {
|
|
legend() {
|
|
- return this.newlist.map((t) => {
|
|
|
|
- return t.title;
|
|
|
|
- });
|
|
|
|
|
|
+ if (this.newlist) {
|
|
|
|
+ return this.newlist.map(t => {
|
|
|
|
+ return t.title
|
|
|
|
+ })
|
|
|
|
+ }
|
|
},
|
|
},
|
|
xdata() {
|
|
xdata() {
|
|
- return this.newlist[0].value.map((t) => {
|
|
|
|
- return t.text;
|
|
|
|
- });
|
|
|
|
|
|
+ return this.newlist[0].value.map(t => {
|
|
|
|
+ return t.text
|
|
|
|
+ })
|
|
},
|
|
},
|
|
series() {
|
|
series() {
|
|
- let result = [];
|
|
|
|
|
|
+ let result = []
|
|
this.newlist.forEach((value, index) => {
|
|
this.newlist.forEach((value, index) => {
|
|
result.push({
|
|
result.push({
|
|
name: value.title,
|
|
name: value.title,
|
|
- type: "line",
|
|
|
|
|
|
+ type: 'line',
|
|
smooth: value.smooth,
|
|
smooth: value.smooth,
|
|
showSymbol: false,
|
|
showSymbol: false,
|
|
zlevel: index,
|
|
zlevel: index,
|
|
lineStyle: {
|
|
lineStyle: {
|
|
normal: {
|
|
normal: {
|
|
color: this.color[index],
|
|
color: this.color[index],
|
|
- width: 1,
|
|
|
|
- },
|
|
|
|
|
|
+ width: 1
|
|
|
|
+ }
|
|
},
|
|
},
|
|
yAxisIndex: value.yAxisIndex,
|
|
yAxisIndex: value.yAxisIndex,
|
|
- data: value.value.map((t) => {
|
|
|
|
- return t.value;
|
|
|
|
- }),
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
|
|
+ data: value.value.map(t => {
|
|
|
|
+ return t.value
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
|
|
- return result;
|
|
|
|
|
|
+ return result
|
|
},
|
|
},
|
|
yAxis() {
|
|
yAxis() {
|
|
- let result = [];
|
|
|
|
|
|
+ let result = []
|
|
result.push({
|
|
result.push({
|
|
- type: "value",
|
|
|
|
|
|
+ type: 'value',
|
|
name: this.unit,
|
|
name: this.unit,
|
|
axisLabel: {
|
|
axisLabel: {
|
|
- formatter: "{value}",
|
|
|
|
- fontSize: util.vh(14),
|
|
|
|
|
|
+ formatter: '{value}',
|
|
|
|
+ fontSize: util.vh(14)
|
|
},
|
|
},
|
|
boundaryGap: false,
|
|
boundaryGap: false,
|
|
//分格线
|
|
//分格线
|
|
splitLine: {
|
|
splitLine: {
|
|
- show: false,
|
|
|
|
- },
|
|
|
|
- });
|
|
|
|
- return result;
|
|
|
|
- },
|
|
|
|
|
|
+ show: false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ return result
|
|
|
|
+ }
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
resize() {},
|
|
resize() {},
|
|
initChart() {
|
|
initChart() {
|
|
- const chart = echarts.init(this.$el);
|
|
|
|
|
|
+ const chart = echarts.init(this.$el)
|
|
|
|
|
|
let option = {
|
|
let option = {
|
|
color: this.color,
|
|
color: this.color,
|
|
tooltip: {
|
|
tooltip: {
|
|
- trigger: "axis",
|
|
|
|
- backgroundColor: "rgba(0,0,0,0.4)",
|
|
|
|
- borderColor: partten.getColor("gray"),
|
|
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+ backgroundColor: 'rgba(0,0,0,0.4)',
|
|
|
|
+ borderColor: partten.getColor('gray'),
|
|
textStyle: {
|
|
textStyle: {
|
|
- color: "#fff",
|
|
|
|
- fontSize: util.vh(16),
|
|
|
|
- },
|
|
|
|
|
|
+ color: '#fff',
|
|
|
|
+ fontSize: util.vh(16)
|
|
|
|
+ }
|
|
},
|
|
},
|
|
legend: {
|
|
legend: {
|
|
show: this.showLegend,
|
|
show: this.showLegend,
|
|
data: this.legend,
|
|
data: this.legend,
|
|
right: 56,
|
|
right: 56,
|
|
- icon: "circle",
|
|
|
|
|
|
+ icon: 'circle',
|
|
itemWidth: 6,
|
|
itemWidth: 6,
|
|
- inactiveColor: partten.getColor("gray"),
|
|
|
|
|
|
+ inactiveColor: partten.getColor('gray'),
|
|
textStyle: {
|
|
textStyle: {
|
|
- color: partten.getColor("grayl"),
|
|
|
|
- fontSize: 12,
|
|
|
|
- },
|
|
|
|
|
|
+ color: partten.getColor('grayl'),
|
|
|
|
+ fontSize: 12
|
|
|
|
+ }
|
|
},
|
|
},
|
|
grid: {
|
|
grid: {
|
|
top: 16,
|
|
top: 16,
|
|
left: 32,
|
|
left: 32,
|
|
right: 8,
|
|
right: 8,
|
|
- bottom: 24,
|
|
|
|
|
|
+ bottom: 24
|
|
},
|
|
},
|
|
xAxis: [
|
|
xAxis: [
|
|
{
|
|
{
|
|
- type: "category",
|
|
|
|
|
|
+ type: 'category',
|
|
boundaryGap: false,
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
axisLabel: {
|
|
- formatter: "{value}",
|
|
|
|
|
|
+ formatter: '{value}',
|
|
textStyle: {
|
|
textStyle: {
|
|
- color: partten.getColor("gray"),
|
|
|
|
- fontSize: util.vh(14),
|
|
|
|
- },
|
|
|
|
|
|
+ color: partten.getColor('gray'),
|
|
|
|
+ fontSize: util.vh(14)
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- data: this.xdata,
|
|
|
|
- },
|
|
|
|
|
|
+ data: this.xdata
|
|
|
|
+ }
|
|
],
|
|
],
|
|
yAxis: this.yAxis,
|
|
yAxis: this.yAxis,
|
|
- series: this.series,
|
|
|
|
- };
|
|
|
|
|
|
+ series: this.series
|
|
|
|
+ }
|
|
|
|
|
|
- chart.clear();
|
|
|
|
- chart.setOption(option);
|
|
|
|
|
|
+ chart.clear()
|
|
|
|
+ chart.setOption(option)
|
|
|
|
|
|
- this.resize = function () {
|
|
|
|
- chart.resize();
|
|
|
|
- };
|
|
|
|
|
|
+ this.resize = function() {
|
|
|
|
+ chart.resize()
|
|
|
|
+ }
|
|
|
|
|
|
- window.addEventListener("resize", this.resize);
|
|
|
|
- },
|
|
|
|
|
|
+ window.addEventListener('resize', this.resize)
|
|
|
|
+ }
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
- this.id = "pie-chart-" + util.newGUID();
|
|
|
|
- });
|
|
|
|
- this.newlist = this.list;
|
|
|
|
- console.warn(this.list);
|
|
|
|
- console.warn(this.newlist);
|
|
|
|
|
|
+ this.id = 'pie-chart-' + util.newGUID()
|
|
|
|
+ })
|
|
|
|
+ this.newlist = this.list
|
|
|
|
+ console.warn(this.list)
|
|
|
|
+ console.warn(this.newlist)
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
- this.$el.style.width = this.width;
|
|
|
|
- this.$el.style.height = this.height;
|
|
|
|
- this.initChart();
|
|
|
|
- });
|
|
|
|
|
|
+ this.$el.style.width = this.width
|
|
|
|
+ this.$el.style.height = this.height
|
|
|
|
+ this.initChart()
|
|
|
|
+ })
|
|
},
|
|
},
|
|
updated() {
|
|
updated() {
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
- this.initChart();
|
|
|
|
- });
|
|
|
|
|
|
+ this.initChart()
|
|
|
|
+ })
|
|
},
|
|
},
|
|
unmounted() {
|
|
unmounted() {
|
|
- window.removeEventListener("resize", this.resize);
|
|
|
|
- },
|
|
|
|
-};
|
|
|
|
|
|
+ window.removeEventListener('resize', this.resize)
|
|
|
|
+ }
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
<style lang="less">
|