commit
6494e35cda
@ -0,0 +1,100 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 16:01:05
|
||||
* @LastEditTime: 2021-11-03 12:01:12
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-labelDiv/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="v-label-container" ref="vlc" :style="eStyle">
|
||||
<span v-if="showBack==true" ref="titleRef" :style="{color: titleColor}" @click="handlerClick">
|
||||
<a-icon class="v-label-icon" type="import" @click="goBack" /><span style="margin-left: 14px">{{title}}</span>
|
||||
</span>
|
||||
<span v-else ref="titleRef" :style="{color: titleColor}" @click="handlerClick">
|
||||
{{title}}
|
||||
</span>
|
||||
<div class="gx" v-if="showLine"></div>
|
||||
<div class="v-l-right">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "v-label-div",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
titleColor: {
|
||||
type: String,
|
||||
default: '#000'
|
||||
},
|
||||
showLine: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
eStyle: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlerClick() {
|
||||
this.$emit('click')
|
||||
},
|
||||
goBack() {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-label-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #FFF;
|
||||
border-bottom: 2px solid #0F2A4D;
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
.gx {
|
||||
position: absolute;
|
||||
width: 48px;
|
||||
height: 4px;
|
||||
background: linear-gradient(270deg, #45B5F4 0%, #0A1E38 100%);
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
.v-l-right {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.v-label-icon {
|
||||
color: #45B5F4;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,111 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 09:12:13
|
||||
* @LastEditTime: 2021-11-02 18:03:08
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||
export default function createOpt(dx,ds) {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "28px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||
formatter: function (params) {
|
||||
var result = "";
|
||||
var dotHtml =
|
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||
params.forEach(function (item) {
|
||||
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#000",
|
||||
},
|
||||
},
|
||||
data: dx,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#000",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: (value) => {
|
||||
let str = bigNumberTransform(value);
|
||||
return str;
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "2001",
|
||||
data: ds,
|
||||
type: "bar",
|
||||
barWidth: 24,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: '#000',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgb(65,117,203,0.9)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue