echart的封装
2022-11-10 本文已影响0人
kingLeft7
第一种方式
// myCharts.js
/**
* 各种画echarts图表的方法都封装在这里
* 注意：这里echarts没有采用按需引入的方式，只是为了方便学习
*/
import * as echarts from 'echarts';
const install = function(Vue) {
Object.defineProperties(Vue.prototype, {
$chart: {
get() {
return {
//线形图
line: function(id, xdata, ydata, data3, sdata, that, isno) {
this.chart = echarts.init(document.getElementById(id));
this.chart.clear();
const optionData = {
tooltip: {
trigger: 'axis'
},
legend: {
orient: 'horizontal',
itemGap: 40,
textStyle: {
color: '#333'
// ...
},
top: '0px',
right: "10%",
itemHeight: 16,
fontSize: 12,
padding: [0, 0, -3, 0], // 修改文字和图标距离
// ...
},
grid: {
// show:false,
top: '20%',
right: '10%',
bottom: '25%',
left: '20%'
},
toolbox: {
// feature: {
// saveAsImage: {}
// }
},
xAxis: {
data: xdata,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
},
yAxis: {
// splitLine: {
// show: false
// },
axisLine: {
show: false
},
axisTick: {
show: false
},
// data: [0, 500, 1000, 1500,1800]
},
series: [{
data: ydata,
smooth: true,
type: 'line',
symbol: 'none',
lineStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FBC95C'
},
{
offset: 1,
color: '#FF6550'
}
])
},
areaStyle: {},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFDDCB'
},
{
offset: 1,
color: '#FAFAFC'
}
])
},
},
}]
}
this.chart.setOption(optionData)
let _this = this
window.addEventListener('resize', () => {
if (_this.chart) {
_this.chart.resize()
}
})
this.chart.on('click', function(params) {
console.log(params.name)
// that.$router.push({
// path: '/EventSearch',
// query: {
// language: params.seriesName,
// times: params.name
// }
// });
})
},
crile: function(id, xdata, that, isno) {
this.chart = echarts.init(document.getElementById(id));
this.chart.clear();
const optionData = {
tooltip: {
trigger: 'item'
},
legend: {
itemHeight: 10,
itemWidth: 10,
icon: "circle",
orient: 'vertical',
left: 'center',
bottom: 30,
orient: 'horizontal',
textStyle: {
fontSize: 12,
color: '#333333'
}
},
series: [{
name: '',
type: 'pie',
radius: ['35%', '50%'],
center: ["50%", "40%"],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: xdata,
itemStyle: {
normal: {
color: function(colors) {
var colorList = [
'#558DFF',
'#59D7FF',
'#9ADA70',
'#FFBF5C',
'#B8B8B8',
'#F8746C'
];
return colorList[colors.dataIndex];
}
},
},
}]
};
this.chart.setOption(optionData)
let _this = this
window.addEventListener('resize', () => {
if (_this.chart) {
_this.chart.resize()
}
})
this.chart.on('click', function(params) {
})
},
hcolumnar: function(id, xdata, ydata, data3, sdata, that, isno) {
this.chart = echarts.init(document.getElementById(id));
this.chart.clear();
console.log('sdfsfsdfsdf')
const optionData = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'value',
// splitLine: {
// show: false
// },
// axisTick: {
// show: false
// },
show: false,
}],
yAxis: [{
type: 'category',
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
}],
series: [{
name: 'Direct',
type: 'bar',
barWidth: '8',
backgroundStyle: {
color: 'rgba(111, 162, 135, 0.2)'
},
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [10, 10, 10, 10],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FEC949'
},
{
offset: 1,
color: '#FEC949'
}
])
},
},
data: [10, 52, 200, 334, 390, 330, 220]
}]
};
this.chart.setOption(optionData)
let _this = this
window.addEventListener('resize', () => {
if (_this.chart) {
_this.chart.resize()
}
})
this.chart.on('click', function(params) {
// 控制台打印数据的名称'chart1'
console.log(params)
console.log(params.name)
// that.$router.push({
// path: '/EventSearch',
// query: {
// language: params.seriesName,
// times: params.name
// }
// });
})
},
hcake: function(id, xdata, ydata, data3, sdata, that, isno) {
console.log(id, '大饼图')
this.chart = echarts.init(document.getElementById(id));
this.chart.clear();
const optionData = {
title: {
// text: 'Referer of a Website',
// subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
itemHeight: 10,
itemWidth: 10,
icon: "circle",
orient: 'vertical',
left: 'center',
bottom: 30,
orient: 'horizontal',
textStyle: {
fontSize: 12,
color: '#333333'
}
},
series: [{
name: 'Access From',
type: 'pie',
center: ["50%", "40%"],
radius: '50%',
data: [{
value: 1048,
name: '按时填写'
},
{
value: 735,
name: '未按时填写'
},
{
value: 580,
name: '未填写'
}
],
itemStyle: {
normal: {
color: function(colors) {
var colorList = [
'#92CE6B',
'#FFBF5C',
'#C0C6CE'
];
return colorList[colors.dataIndex];
}
},
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
this.chart.setOption(optionData)
let _this = this
window.addEventListener('resize', () => {
if (_this.chart) {
_this.chart.resize()
}
})
this.chart.on('click', function(params) {
// 控制台打印数据的名称'chart1'
console.log(params)
console.log(params.name)
// that.$router.push({
// path: '/EventSearch',
// query: {
// language: params.seriesName,
// times: params.name
// }
// });
})
},
supercolumn: function(id, xdata, ydata, that, isno) {
console.log(id, '大饼图')
this.chart = echarts.init(document.getElementById(id));
this.chart.clear();
const optionData = {
grid: {
left: "10%",
right: "10%",
top: "10%",
bottom: "20%",
containLable: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
lineStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,255,255,0.33)'
},
{
offset: 1,
color: 'rgba(75,139,253,0.02)'
}
]),
width: 40,
type: "solid",
},
z: 0, //注意要设置层级，不然会在覆盖在柱子前面，设置为0就在柱子后面显示了。
},
},
xAxis: {
type: "category",
data: xdata,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
},
yAxis: {
type: "value",
show: false,
},
series: [{
data: ydata,
type: "bar",
// name: "留存",
// stack: "用户",
showBackground: true,
backgroundStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,255,255,0.33)'
},
{
offset: 1,
color: 'rgba(75,139,253,0.02)'
}
]),
width: 40,
type: "solid"
},
emphasis: {
focus: "series",
},
barWidth: 24,
itemStyle: {
normal: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [10, 10, 10, 10],
color: '#E9EBF1',
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: '#FEC949'
// },
// {
// offset: 1,
// color: '#FEC949'
// }
// ])
},
emphasis: {
color: '#4B8BFD',
}
},
}, ],
};
this.chart.setOption(optionData)
let _this = this
window.addEventListener('resize', () => {
if (_this.chart) {
_this.chart.resize()
}
})
this.chart.on('click', function(params) {
// 控制台打印数据的名称'chart1'
console.log(params)
console.log(params.name)
// that.$router.push({
// path: '/EventSearch',
// query: {
// language: params.seriesName,
// times: params.name
// }
// });
})
},
}
}
}
})
}
export default {
install
}
// main.js
import myCharts from "./myCharts.js"
Vue.use(myCharts)
// index.vue
<div id="line" />
this.$chart.line('line', xdata, ydata, '', xAxisData, this, true)
#line {
width: 100%;
height: 3.5rem;
}
第二种 单个
image.png
//ChartsCircle.vue
<template>
<div class="visualization-charts-common">
<div ref="charts" class="visualization-charts"></div>
<Select v-if="selectOptions && selectOptions.length&&showSelect" :options="selectOptions" @change="select">
</Select>
<!-- 返回上一级 -->
<p class="back" v-show="showBack" @click="back">返回</p>
<!-- 中心数据展示 -->
<div class="center-data" v-if="total || total == 0">
<p>总数</p>
<p>{{total}}</p>
</div>
</div>
</template>
<script setup>
import { ref, toRefs, onMounted, onUnmounted, watch } from 'vue'
import Store from '@/store'
import Select from '../components/Select.vue'
import * as echarts from 'echarts/core';
let props = defineProps({
data: Object,
selectOptions: Array,
total: [String, Number]
})
let emit = defineEmits(['select'])
let { data, selectOptions, total } = toRefs(props)
let charts = ref(null)
let chart = ref(null)
let showBack = ref(false)
let showSelect = ref(true)
let clickData = ref(null)
// let loading = ref(true)
onMounted(() => {
chart.value = echarts.init(charts.value)
// chart.value.showLoading(loadingConfig())
// loading.value = true
window.addEventListener('resize', resize)
// chart.value.on('click', function (params) {
// if (params.data.list.length !== 0) {
// emit('clickChart', params)
// // chart.value.setOption(initOption(params.data.list))
// }
// })
chart.value.on('click', ({ data: newData }) => {
if (newData.list) {
let newList = []
newData.list.forEach(item => {
newList.push({
count: item.amount,
name: item.name,
ratio: item.ratio,
})
})
// newData.list = [{
// amount: "280000",
// count: 280000,
// list: null,
// name: "基于药物代谢动力学特性的复方依达拉奉注射液立题依据研究",
// ratio: "0.48%",
// type: "普通合同"
// }]
showSelect.value = false
showBack.value = true
clickData.value = {
...data.value,
formatter: '{b}\n\n{d}%',
tipFormat: ({ data: { name, count, ratio } }) => {
console.log(data, "data")
return `${name}：<br/>${count} | ${ratio}`
},
colors: ['#73DEB3', '#F2D459', '#4DC2FF', '#E6645D', '#A285D2'],
source: newList
}
chart.value.setOption(initOption(clickData.value))
}
})
})
onUnmounted(() => {
window.removeEventListener('resize', resize)
})
watch(() => data.value, () => {
chart.value.setOption(initOption())
// loading.value = false
// chart.value.hideLoading()
})
// 适配
const resize = () => {
if (chart.value) {
if (clickData.value) {
chart.value.setOption(initOption(clickData.value))
chart.value.resize()
} else {
chart.value.setOption(initOption())
chart.value.resize()
}
}
}
const loadingConfig = () => {
const rate = Store.state.defaultData.width
return {
text: '数据加载中...',
color: '#fff',
textColor: '#FFF',
maskColor: 'rgba(255, 255, 255, 0.1)',
zlevel: 0,
// 字体大小。从 `v4.8.0` 开始支持。
fontSize: 12 * rate,
// 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
showSpinner: true,
// 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
spinnerRadius: 10 * rate,
// 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
lineWidth: 2 * rate,
// 字体粗细。从 `v5.0.1` 开始支持。
fontWeight: 'normal',
// 字体风格。从 `v5.0.1` 开始支持。
fontStyle: 'normal',
}
}
const initOption = (newData) => {
const rate = Store.state.defaultData.width
let tipFormat, formatter, source, colors
console.log(newData, data.value)
// const { dimensions, formatter, source, colors, tipFormat } = data.value
if (newData) {
tipFormat = newData.tipFormat
formatter = newData.formatter
source = newData.source
colors = newData.colors
// dimensions = newData.dimensions
} else {
tipFormat = data.value.tipFormat
formatter = data.value.formatter
source = data.value.source
colors = data.value.colors
// dimensions = data.value.dimensions
}
console.log(source, "source")
// console.log(source, "source")
return {
// 数据集
dataset: { source },
tooltip: {
show: true,
formatter: tipFormat || formatter
},
legend: {
type: 'scroll', // type 普通模式，滚动模式
icon: 'circle',
bottom: 12 * rate,
left: 'center',
padding: [0, 10 * rate], // 与 left top 类似
itemGap: 36 * rate, // 图例间距
itemWidth: 9 * rate, // 图标宽度
itemHeight: 9 * rate, // 图标高度
pageIconSize: 12 * rate, // 滚动icon大小
pageIconInactiveColor: '#0933AA', // 默认颜色
pageIconColor: '#4DC2FF', // 激活颜色
pageTextStyle: {
color: '#D0E0FF'
},
textStyle: {
color: '#D0E0FF',
fontSize: 12 * rate,
lineHeight: 14 * rate
}
},
series: [
{
type: 'pie', // 图表类型
radius: [100 / 2 * rate, 140 / 2 * rate], // 圆环半径
left: 'center',
top: 9 * rate, // 中心偏移
height: 210 * rate,
color: colors || ['#73DEB3', '#F2D459', '#4DC2FF', '#E6645D', '#A285D2', '#b2fcb6', '#f09278', '#eb5ac8', '#8ec55e', '#5bb3f9', '#eda93b', '#c028ec', '#ec633f', '#7246be', '#5cbb7f', '#3672f6', '#e9752e', '#9c1ff5'],
clockwise: false, // 顺时针 true 混乱 false
minAngle: 5, // 最小占比
itemStyle: {
borderWidth: 2 * rate,
borderColor: '#273989'
},
label: {
show: true,
fontSize: 12 * rate,
color: '#D0E0FF',
formatter,
padding: [0, -60 * rate, 0, -60 * rate]
},
labelLine: {
show: true,
length: 16 * rate,
length2: 96 * rate,
lineStyle: {
color: '#D0E0FF',
width: 0.5
}
},
emphasis: {
scaleSize: 6 * rate
},
}
]
}
}
const select = val => {
// chart.value.showLoading(loadingConfig())
// loading.value = true
showBack.value = false
emit('select', val)
}
const back = () => {
showBack.value = false
showSelect.value = true
chart.value.setOption(initOption())
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.visualization-charts-common {
width: 100%;
height: 100%;
position: relative;
background: url('~img/visualization/img-chart-bg.png') no-repeat center 20px/185px 185px;
.visualization-charts {
width: 100%;
height: 100%;
position: relative;
}
.center-data {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: -10px;
p {
font-size: 14px;
color: #d0e0ff;
text-align: center;
}
}
}
.back {
position: absolute;
right: 10px;
top: 10px;
width: 80px;
height: 26px;
border-radius: 4px;
background: #33539a;
font-size: 14px;
font-weight: 400;
color: #91b3f3;
line-height: 26px;
text-align: center;
cursor: pointer;
}
</style>
//ChartsColumn
<template>
<div class="visualization-charts-common">
<div ref="charts" class="visualization-charts"></div>
<Select
v-if="selectOptions && selectOptions.length"
:options="selectOptions"
@change="select">
</Select>
<Radio
v-if="radioOptions && radioOptions.length"
:options="radioOptions"
:value="radioValue"
@change="change">
</Radio>
</div>
</template>
<script setup>
import { ref, toRefs, onMounted, onUnmounted, watch } from 'vue'
import Select from '../components/Select.vue'
import Radio from '../components/Radio.vue'
import Store from '@/store'
import * as echarts from 'echarts/core';
let props = defineProps({
data: Object,
selectOptions: Array,
radioOptions: Array,
radioValue: [String, Number]
})
let emit = defineEmits(['select', 'change'])
let { data, selectOptions, radioOptions } = toRefs(props)
let charts = ref(null)
let chart = ref(null)
let loading = ref(true)
onMounted(() => {
chart.value = echarts.init(charts.value)
// chart.value.showLoading(loadingConfig())
// loading.value = true
window.addEventListener('resize', resize)
})
onUnmounted(() => {
window.removeEventListener('resize', resize)
})
watch(() => data.value, () => {
chart.value.setOption(initOption())
// loading.value = false
// chart.value.hideLoading()
})
const resize = () => {
if (chart.value) {
chart.value.setOption(initOption())
chart.value.resize()
}
}
const loadingConfig = () => {
const rate = Store.state.defaultData.width
return {
text: '数据加载中...',
color: '#fff',
textColor: '#FFF',
maskColor: 'rgba(255, 255, 255, 0.1)',
zlevel: 0,
// 字体大小。从 `v4.8.0` 开始支持。
fontSize: 12 * rate,
// 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
showSpinner: true,
// 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
spinnerRadius: 10 * rate,
// 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
lineWidth: 2 * rate,
// 字体粗细。从 `v5.0.1` 开始支持。
fontWeight: 'normal',
// 字体风格。从 `v5.0.1` 开始支持。
fontStyle: 'normal',
}
}
const initOption = () => {
const rate = Store.state.defaultData.width
const { line, inverse, legend, rotate, dimensions, source, colors, formatter } = data.value
// 数据
const series = []
colors.forEach((color) => {
const firstColor = color[0], secondColor = color[1]
series.push({
type: 'bar',
barWidth: 8 * rate,
itemStyle: {
barBorderRadius: [10 * rate, 10 * rate, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: firstColor },
{ offset: 1, color: secondColor }
])
},
// hover 效果
// emphasis: {
// focus: 'series',
// scaleSize: 6 * rate
// },
})
})
// 如果有线图
if (line) {
// 线
series.push(
{
type: 'line',
yAxisIndex: 1,
// 标记
showSymbol: false, // 显示标记
symbol: 'circle',
symbolSize: 6 * rate,
itemStyle: {
width: 0 * rate,
color: line.color
},
// 线
lineStyle: {
color: line.color,
width: 2 * rate
},
smooth: true, // 平滑曲线
axisLine: {
show: true,
},
}
)
}
//配置项
const rorateNum = rotate || 0 // 控制 X轴文字过多的旋转
let height = 86, top = 10
if (legend) height -= 10
const hasTop =
(selectOptions.value && selectOptions.value.length) ||
(radioOptions.value && radioOptions.value.length)
if (hasTop) {
height -= 10
top = 20
}
return {
color: data.value.colors,
// 数据集
dataset: { dimensions, source },
// 图例配置
legend: {
show: legend,
type: 'scroll', // type 普通模式，滚动模式
icon: 'rect',
bottom: 12 * rate,
left: 'center',
padding: [0, 10 * rate], // 与 left top 类似
itemGap: 36 * rate, // 图例间距
itemWidth: 12 * rate, // 图标宽度
itemHeight: 2 * rate, // 图标高度
pageIconSize: 12 * rate, // 滚动icon大小
pageIconInactiveColor: '#0933AA', // 默认颜色
pageIconColor: '#4DC2FF', // 激活颜色
pageTextStyle: {
color: '#D0E0FF'
},
textStyle: {
color: '#D0E0FF',
fontSize: 12 * rate
},
},
tooltip: {
trigger: 'axis',
formatter,
axisPointer: {
type: 'line',
label: {
backgroundColor: '#6a7985'
},
lineStyle: {
type: 'solid',
width: 1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(77,194,255,1)'
},
{
offset: 1,
color: 'rgba(25,104,255,0)'
}
])
}
}
},
xAxis: [
{
inverse,
axisLabel: {
fontSize: 12 * rate, // 更改坐标轴文字大小
color: '#D0E0FF', // '#5A6382',
interval: 0,
rotate: rorateNum,
formatter: params => getChar(params, 8)
},
type: 'category',
// inverse: false, // 反转坐标轴
boundaryGap: true, // 是否留白
// min: 0, // 最小刻度个数
// max: 10, // 最大刻度个数
scale: false,
// 刻度线设置
axisLine: {
lineStyle: {
color: 'rgba(90,99,130,0.6)',
width: 1
}
},
// 刻度
axisTick: {
show: false,
// alignWithLabel: false, // 刻度对齐 line 不生效
inside: true, // 刻度是否向上
length: 5 * rate, // 刻度长度
lineStyle: {
color: 'rgba(90,99,130,0.6)',
width: 1
}
},
// 背景网格线
splitLine: {
show: false
}
}
],
yAxis: [
{
minInterval: 1,
axisLabel: {
fontSize: 12 * rate, // 更改坐标轴文字大小
color: '#D0E0FF' // '#5A6382'
},
type: 'value',
splitLine: {
show: false
}
},
{
show: true,
type: 'value',
axisLabel: { show: false, formatter: '{value}' },
splitLine: { show: false },
axisTick: { show: false }
}
],
grid: {
left: '3%',
top: `${top}%`,
width: '90%',
height: `${height}%`,
containLabel: true
},
series
}
}
const select = val => {
// chart.value.showLoading(loadingConfig())
// loading.value = true
emit('select', val)
}
const change = val => {
// chart.value.showLoading(loadingConfig())
// loading.value = true
emit('change', val)
}
// 工具函数
const getChar = (str, limit) => {
let text = ''
let bytesCount = 0;
for (let i = 0; i < str.length; i++) {
let char = str.charAt(i);
let c = char
text += char
//匹配双字节
if (/^[u0000-u00ff]$/.test(c)) {
bytesCount += 1;
} else {
bytesCount += 2;
}
if (bytesCount >= limit) return `${text}...`
}
return str
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.visualization-charts-common {
width: 100%;
height: 100%;
position: relative;
.visualization-charts {
width: 100%;
height: 100%;
}
.empty-tip {
position: absolute;
left: 50%;
top: 50%;
font-size: 14px;
color: white;
}
}
</style>
//ChartsKeyword
<template>
<div class="visualization-charts-common">
<div ref="charts" class="visualization-charts"></div>
</div>
</template>
<script setup>
import { ref, toRefs, onMounted, onUnmounted, watch } from 'vue'
import Store from '@/store'
import * as echarts from 'echarts/core';
// type 0 科研项目关键字 1 研究方向 2 因子影响
let props = defineProps({ data: Object, })
let { data } = toRefs(props)
let charts = ref(null)
let chart = ref(null)
onMounted(() => {
chart.value = echarts.init(charts.value)
// chart.value.showLoading(loadingConfig())
window.addEventListener('resize', resize)
})
onUnmounted(() => {
window.removeEventListener('resize', resize)
})
watch(() => data.value, () => {
chart.value.setOption(initOption())
// chart.value.hideLoading()
})
const resize = () => {
if (chart.value) {
chart.value.setOption(initOption())
chart.value.resize()
}
}
const loadingConfig = () => {
const rate = Store.state.defaultData.width
return {
text: '数据加载中...',
color: '#fff',
textColor: '#FFF',
maskColor: 'rgba(255, 255, 255, 0.1)',
zlevel: 0,
// 字体大小。从 `v4.8.0` 开始支持。
fontSize: 12 * rate,
// 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
showSpinner: true,
// 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
spinnerRadius: 10 * rate,
// 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
lineWidth: 2 * rate,
// 字体粗细。从 `v5.0.1` 开始支持。
fontWeight: 'normal',
// 字体风格。从 `v5.0.1` 开始支持。
fontStyle: 'normal',
}
}
const color = ['#FF7F82', '#FFD867', '#38D8E4', '#D982E0', '#F74B4B', '#4DC2FF']
const initOption = () => {
const rate = Store.state.defaultData.width
return {
tooltip: {},
series: [{
type: 'wordCloud',
shape: 'pentagon', // 形状
// 位置
left: 'center',
top: 'center',
// 宽高
width: '90%',
height: '85%',
sizeRange: [14 * rate, 32 * rate], // 文本大小范围
rotationRange: [-0, 0], // 旋转范围
rotationStep: 2, // 旋转单位
gridSize: 10 * rate, // 网格（单词间距）
drawOutOfBound: false, // 是否可以在画布外绘制
textStyle: {
color: () => {
const index = Math.round(Math.random() * 5)
return color[index]
}
},
data: data.value.source
}]
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.visualization-charts-common {
width: 100%;
height: 100%;
position: relative;
.visualization-charts {
width: 100%;
height: 100%;
}
}
</style>
//ChartsLevel
<template>
<div class="visualization-charts-common">
<div ref="charts" class="visualization-charts"></div>
<Select
v-if="selectOptions && selectOptions.length"
:options="selectOptions"
@change="select">
</Select>
<Radio
v-if="radioOptions && radioOptions.length"
:options="radioOptions"
@change="change">
</Radio>
<div class="button-more" v-if="showMore" @click="clickMore">
<p class="button-text">更多</p>
<i class="el-icon-arrow-right"></i>
</div>
</div>
</template>
<script setup>
import { ref, toRefs, onMounted, onUnmounted, watch } from 'vue'
import Select from '../components/Select.vue'
import Radio from '../components/Radio.vue'
import Store from '@/store'
import * as echarts from 'echarts/core';
let props = defineProps({
data: Object,
selectOptions: Array,
radioOptions: Array,
showMore: Boolean,
})
let emit = defineEmits(['select', 'change', 'more'])
let { data, selectOptions, radioOptions, showMore } = toRefs(props)
let charts = ref(null)
let chart = ref(null)
let loading = ref(true)
onMounted(() => {
chart.value = echarts.init(charts.value)
// chart.value.showLoading(loadingConfig())
// loading.value = true
window.addEventListener('resize', resize)
})
onUnmounted(() => {
window.removeEventListener('resize', resize)
})
watch(() => data.value, () => {
chart.value.setOption(initOption())
// loading.value = false
// chart.value.hideLoading()
})
const resize = () => {
if (chart.value) {
chart.value.setOption(initOption())
chart.value.resize()
}
}
const loadingConfig = () => {
const rate = Store.state.defaultData.width
return {
text: '数据加载中...',
color: '#fff',
textColor: '#FFF',
maskColor: 'rgba(255, 255, 255, 0.1)',
zlevel: 0,
// 字体大小。从 `v4.8.0` 开始支持。
fontSize: 12 * rate,
// 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
showSpinner: true,
// 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
spinnerRadius: 10 * rate,
// 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
lineWidth: 2 * rate,
// 字体粗细。从 `v5.0.1` 开始支持。
fontWeight: 'normal',
// 字体风格。从 `v5.0.1` 开始支持。
fontStyle: 'normal',
}
}
const initOption = () => {
const rate = Store.state.defaultData.width
const { legend, rotate, dimensions, source, colors, formatter, dot, xFormatter, yInverse } = data.value
// 数据
const series = []
colors.forEach((color) => {
const firstColor = color[0], secondColor = color[1]
series.push({
type: 'bar',
barWidth: 4 * rate,
itemStyle: {
barBorderRadius: [0, 4 * rate, 4 * rate, 0],
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: firstColor },
{ offset: 1, color: secondColor }
])
},
// hover 效果
// emphasis: {
// focus: 'series',
// scaleSize: 6 * rate
// },
})
})
// 顶部光点
series.push({
type: 'pictorialBar',
symbol: () => (circleList[dot]),
symbolPosition: 'end',
symbolSize: [14 * rate, 14 * rate],
symbolOffset: [7 * rate, 0],
z: 14,
})
//配置项
const rorateNum = rotate || 0 // 控制 X轴文字过多的旋转
let height = 86, top = 10
if (legend) height -= 10
const hasTop =
(selectOptions.value && selectOptions.value.length) ||
(radioOptions.value && radioOptions.value.length) ||
showMore.value
if (hasTop) {
height -= 10
top = 20
}
return {
color: data.value.colors,
// 数据集
dataset: { dimensions, source },
// 图例配置
legend: {
show: legend,
type: 'scroll', // type 普通模式，滚动模式
icon: 'rect',
bottom: 12 * rate,
left: 'center',
padding: [0, 10 * rate], // 与 left top 类似
itemGap: 36 * rate, // 图例间距
itemWidth: 12 * rate, // 图标宽度
itemHeight: 2 * rate, // 图标高度
pageIconSize: 12 * rate, // 滚动icon大小
pageIconInactiveColor: '#0933AA', // 默认颜色
pageIconColor: '#4DC2FF', // 激活颜色
pageTextStyle: {
color: '#D0E0FF'
},
textStyle: {
color: '#D0E0FF',
fontSize: 12 * rate
},
},
tooltip: {
trigger: 'axis',
formatter,
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
},
lineStyle: {
type: 'solid',
width: 1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(77,194,255,1)'
},
{
offset: 1,
color: 'rgba(25,104,255,0)'
}
])
},
crossStyle: {
type: 'solid',
width: 1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(77,194,255,1)'
},
{
offset: 1,
color: 'rgba(25,104,255,0)'
}
])
}
}
},
yAxis: [
{
inverse: yInverse,
axisLabel: {
fontSize: 12 * rate, // 更改坐标轴文字大小
color: '#D0E0FF', // '#5A6382',
interval: 0,
rotate: rorateNum,
formatter: params => getChar(params, 8)
},
type: 'category',
// inverse: false, // 反转坐标轴
boundaryGap: true, // 是否留白
// min: 0, // 最小刻度个数
// max: 10, // 最大刻度个数
scale: false,
// 刻度线设置
axisLine: {
lineStyle: {
color: 'rgba(90,99,130,0.6)',
width: 1
}
},
// 刻度
axisTick: {
show: false,
// alignWithLabel: false, // 刻度对齐 line 不生效
inside: true, // 刻度是否向上
length: 5 * rate, // 刻度长度
lineStyle: {
color: 'rgba(90,99,130,0.6)',
width: 1
}
},
// 背景网格线
splitLine: {
show: false
}
}
],
xAxis: [
{
axisLabel: {
fontSize: 12 * rate, // 更改坐标轴文字大小
color: '#D0E0FF', // '#5A6382'
formatter: xFormatter
},
type: 'value',
splitLine: {
show: false
}
}
],
grid: {
left: '3%',
top: `${top}%`,
width: '90%',
height: `${height}%`,
containLabel: true
},
series
}
}
const select = val => {
// chart.value.showLoading(loadingConfig())
// loading.value = true
emit('select', val)
}
const change = val => {
// chart.value.showLoading(loadingConfig())
// loading.value = true
emit('change', val)
}
const clickMore = () => {
emit('more')
}
// 工具函数
const getChar = (str, limit) => {
let text = ''
let bytesCount = 0;
for (let i = 0; i < str.length; i++) {
let char = str.charAt(i);
let c = char
text += char
//匹配双字节
if (/^[u0000-u00ff]$/.test(c)) {
bytesCount += 1;
} else {
bytesCount += 2;
}
if (bytesCount >= limit) return `${text}...`
}
return str
}
let circleList = [
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAACFElEQVRIia3Wv24TQRDH8Y9PSZBwCmMrIY2hwDWIPwUNbfgnUfIC8BwgeAtEXgMRAh10iCCo08RpgiWCIiUUxLIpdg8cs2snZ77SNXM389ubnZ2d2sN3352AFpbRRB3z0X6EQ/zAN0wNNjfhXQ1tdKJIijPxaeJSFN/CDoanETyL62hMW/EYdVzBRXzCz/EPioRTC7cqiI3SiDFa0wSXcBMLM4iVLMRYSznBRdxILGIWihhzsTSUe1jDVZOLqI1VYW/PR9suNrEhFEqKuRj7A4alQFt+z+bwCPfiwsYX0cYDvMEafiViNOJ33TJ9nQliT3E/ITZKDXfwRD5LHUKOW/Ln7LFQ5iflspCNFHW0CqGDpLggrPq03I2+KZYLoUukWFWtYovom6JZyKfzWgWxab71wt9GPM7KDII53/n/echH6edeFMIVk2J3BsFexn5UCFdKis0ZBL9k7IeFcHmmeItBBbGB0OpS7BXCTZ1iG+sVBNejb4peIYwFubSuyacnxdfok+JQ/EPCWJCij2d4JTMyRIbCnz2Xr9AtI7fFjjAWNDKiL/Aat4VDvSJUd0/IwIZ8GmE/avzp7EN8FsaCXLfv4uWEoDn6QsUPOd4rD4TBp0pl5hjEmAelYbzT9PDRhE5xCvox1rEmkGptPbwX8l6V/Rjjn46T26+D6DBtEB6n8iAsOnSjc1MYnM6ZPOrv5YRKfgMBHnHO24sLIQAAAABJRU5ErkJggg==',
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAACFklEQVRIia3Wv24TQRDH8Y9PSZBwCmMrIY2hwDWIPwUNbfgn8RLwBvQgeAtE3gIhQiihQwRBHSHhNMESQZEcCmLFFLsHjtm1kzNf6Zq5m/ntzc7OTu3hlxeOQQvLaKKO+Wg/wD5+4Bu+Tws0N+FdDW10okiKU/Fp4kIU38I2hicRPI2raExb8Rh1XMJ5fMDP8Q+KhFMLNyqIjdKIMVrTBJdwHQsziJUsxFhLOcFFXEssYhaKGHOxNJR7WMNlk4uojVVhb89G2w42sSEUSoq5GPsdhqVAW37P5nAfd+LCxhfRxj28xhp+JWI04nfdMn2dCWKPcTchNkoNt/BIPksdQo5b8ufsgVDmx+WikI0UdbQKoYOkOCes+qTcjr4plguhS6RYVa1ii+ibolnIp/NKBbFpvvXC30Y8zsoMgjnf+f95yEcZ5F4UwhWTYmcGwV7GflAIV0qKzRkEP2Xs+4VweaZ4g8MKYodCq0uxWwg3dYqvWK8guB59U/QKYSzIpXVNPj0pPkefFPviHxLGghQDPMFLmZEhMhT+7Kl8hW4ZuS22hbGgkRF9hle4KRzqFaG6e0IGNuTTCHtR409nH+KjMBbkun0XzycEzTEQKn7I0V7ZFwafKpWZ4zDG7JeG8U7Tw3sTOsUJGMRYR5pAqrX18FbIe1X2Yox/Ok5uv/rRYdogPE7lQVh06EbnpjA4nTF51N/NCZX8Bj83cdPYyNDpAAAAAElFTkSuQmCC'
]
</script>
is component only -->
<style lang="scss" scoped>
.visualization-charts-common {
width: 100%;
height: 100%;
position: relative;
.visualization-charts {
width: 100%;
height: 100%;
}
.button-more {
@include flexbox;
justify-content: center;
position: absolute;
right: 10px;
top: 10px;
height: 26px;
border-radius: 4px;
background: #33539a;
font-size: 14px;
font-weight: 400;
color: #91b3f3;
line-height: 26px;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
i {
color: #C0C4CC;
font-size: 14px;
}
}
}
</style>
//ChartsLine
<template>
<div class="visualization-charts-common">
<div ref="charts" class="visualization-charts"></div>
<Select
v-if="selectOptions && selectOptions.length"
:options="selectOptions"
@change="select">
</Select>
<Radio
v-if="radioOptions && radioOptions.length"
:options="radioOptions"
@change="change">
</Radio>
</div>
</template>
<script setup>
import { ref, toRefs, onMounted, onUnmounted, watch } from 'vue'
import Select from '../components/Select.vue'
import Radio from '../components/Radio.vue'
import Store from '@/store'
import * as echarts from 'echarts/core'
let props = defineProps({
data: Object,
selectOptions: Array,
radioOptions: Array
})
let emit = defineEmits(['select', 'change'])
let { data, selectOptions, radioOptions } = toRefs(props)
let charts = ref(null)
let chart = ref(null)
let loading = ref(true)
onMounted(() => {
chart.value = echarts.init(charts.value)
// chart.value.showLoading(loadingConfig())
// loading.value = true
window.addEventListener('resize', resize)
})
onUnmounted(() => {
window.removeEventListener('resize', resize)
})
watch(() => data.value, () => {
chart.value.setOption(initOption())
// loading.value = false
// chart.value.hideLoading()
})
// 适配
const resize = () => {
if (chart.value) {
chart.value.setOption(initOption())
chart.value.resize()
}
}
const loadingConfig = () => {
const rate = Store.state.defaultData.width
return {
text: '数据加载中...',
color: '#fff',
textColor: '#FFF',
maskColor: 'rgba(255, 255, 255, 0.1)',
zlevel: 0,
// 字体大小。从 `v4.8.0` 开始支持。
fontSize: 12 * rate,
// 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
showSpinner: true,
// 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
spinnerRadius: 10 * rate,
// 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
lineWidth: 2 * rate,
// 字体粗细。从 `v5.0.1` 开始支持。
fontWeight: 'normal',
// 字体风格。从 `v5.0.1` 开始支持。
fontStyle: 'normal',
}
}
// 图表逻辑
const initOption = () => {
const rate = Store.state.defaultData.width
const { legend, rotate, dimensions, source, colors, inverse } = data.value
// 数据
const series = []
colors.forEach((color) => {
const firstColor = color[0], secondColor = color[1]
series.push({
type: 'line',
// seriesLayoutBy: 'row',
showSymbol: false, // 显示标记
symbol: 'circle',
symbolSize: 6 * rate,
itemStyle: {
color: firstColor
},
// stack: 'Total', // 数据堆叠值
smooth: true, // 平滑曲线
lineStyle: {
color: firstColor,
width: 2 * rate
},
areaStyle: {
opacity: 0.4,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: firstColor },
{ offset: 1, color: secondColor }
])
},
// hover 效果
emphasis: {
focus: 'series',
scaleSize: 6 * rate
},
})
})
//配置项
const rorateNum = rotate || 0 // 控制 X轴文字过多的旋转
let height = 86, top = 10
if (legend) height -= 10
const hasTop =
(selectOptions.value && selectOptions.value.length) ||
(radioOptions.value && radioOptions.value.length)
if (hasTop) {
height -= 10
top = 20
}
return {
color: data.value.colors,
// 数据集
dataset: { dimensions, source },
// 图例配置
legend: {
show: legend,
type: 'scroll', // type 普通模式，滚动模式
icon: 'rect',
bottom: 12 * rate,
left: 'center',
padding: [0, 10 * rate], // 与 left top 类似
itemGap: 36 * rate, // 图例间距
itemWidth: 12 * rate, // 图标宽度
itemHeight: 2 * rate, // 图标高度
pageIconSize: 12 * rate, // 滚动icon大小
pageIconInactiveColor: '#0933AA', // 默认颜色
pageIconColor: '#4DC2FF', // 激活颜色
pageTextStyle: {
color: '#D0E0FF'
},
textStyle: {
color: '#C6C5DE',
fontSize: 12 * rate
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#6a7985'
},
lineStyle: {
type: 'solid',
width: 1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(77,194,255,1)'
},
{
offset: 1,
color: 'rgba(25,104,255,0)'
}
])
}
}
},
xAxis: [
{
inverse,
axisLabel: {
fontSize: 12 * rate, // 更改坐标轴文字大小
color: '#D0E0FF', // '#5A6382',
interval: 0,
rotate: rorateNum,
formatter: params => getChar(params, 8)
},
type: 'category',
// inverse: false, // 反转坐标轴
boundaryGap: true, // 是否留白
// min: 0, // 最小刻度个数
// max: 10, // 最大刻度个数
scale: false,
// 刻度线设置
axisLine: {
lineStyle: {
color: 'rgba(90,99,130,0.6)',
width: 1
}
},
// 刻度
axisTick: {
alignWithLabel: true, // 搭配 boundaryGap，对齐刻度线
inside: true, // 刻度是否向上
length: 5 * rate, // 刻度长度
lineStyle: {
color: 'rgba(90,99,130,0.6)',
width: 1
}
},
// 背景网格线
splitLine: {
show: false
}
}
],
yAxis: [
{
axisLabel: {
fontSize: 12 * rate, // 更改坐标轴文字大小
color: '#D0E0FF' // '#5A6382'
},
type: 'value',
splitLine: {
show: false
}
}
],
grid: {
left: '3%',
top: `${top}%`,
width: '90%',
height: `${height}%`,
containLabel: true
},
series
}
}
const select = val => {
// chart.value.showLoading(loadingConfig())
// loading.value = true
emit('select', val)
}
// const change = val = {
// // emit('change', val)
// }
// 工具函数
const getChar = (str, limit) => {
let text = ''
let bytesCount = 0;
for (let i = 0; i < str.length; i++) {
let char = str.charAt(i);
let c = char
text += char
//匹配双字节
if (/^[u0000-u00ff]$/.test(c)) {
bytesCount += 1;
} else {
bytesCount += 2;
}
if (bytesCount >= limit) return `${text}...`
}
return str
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.visualization-charts-common {
width: 100%;
height: 100%;
position: relative;
.visualization-charts {
width: 100%;
height: 100%;
}
}
</style>
//ChartsPie
<template>
<div class="visualization-charts-common">
<div ref="charts" class="visualization-charts"></div>
<Select v-if="selectOptions && selectOptions.length" :options="selectOptions" @change="select">
</Select>
<!-- 返回上一级 -->
<p class="back" v-show="showBack" @click="back">返回</p>
</div>
</template>
<script setup>
import { ref, toRefs, onMounted, onUnmounted, watch } from 'vue'
import Store from '@/store'
import Select from '../components/Select.vue'
import * as echarts from 'echarts/core';
let props = defineProps({
data: Object,
selectOptions: Array,
})
let emit = defineEmits(['select'])
let { data, selectOptions } = toRefs(props)
let charts = ref(null)
let chart = ref(null)
let loading = ref(true)
let showBack = ref(false)
onMounted(() => {
chart.value = echarts.init(charts.value)
chart.value.on('click', ({ data }) => {
if (data.cone) {
showBack.value = true
chart.value.setOption(initOption({
...data.value,
tipFormat: ({ data: { name, count, ratio } }) => {
return `${name}：<br/>${count} | ${ratio}`
},
source: data.cone
}))
}
})
// chart.value.showLoading(loadingConfig())
// loading.value = true
window.addEventListener('resize', resize)
})
onUnmounted(() => {
window.removeEventListener('resize', resize)
})
watch(() => data.value, () => {
chart.value.setOption(initOption())
// loading.value = false
// chart.value.hideLoading()
})
const resize = () => {
if (chart.value) {
chart.value.setOption(initOption())
chart.value.resize()
}
}
const loadingConfig = () => {
const rate = Store.state.defaultData.width
return {
text: '数据加载中...',
color: '#fff',
textColor: '#FFF',
maskColor: 'rgba(255, 255, 255, 0.1)',
zlevel: 0,
// 字体大小。从 `v4.8.0` 开始支持。
fontSize: 12 * rate,
// 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
showSpinner: true,
// 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
spinnerRadius: 10 * rate,
// 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
lineWidth: 2 * rate,
// 字体粗细。从 `v5.0.1` 开始支持。
fontWeight: 'normal',
// 字体风格。从 `v5.0.1` 开始支持。
fontStyle: 'normal',
}
}
const initOption = (newData) => {
const rate = Store.state.defaultData.width
let tipFormat, formatter, source, colors
if (newData) {
tipFormat = newData.tipFormat
formatter = newData.formatter
source = newData.source
colors = newData.colors || ['#73DEB3', '#F2D459', '#4DC2FF', '#E6645D', '#A285D2', '#b2fcb6', '#f09278', '#eb5ac8', '#8ec55e', '#5bb3f9', '#eda93b', '#c028ec', '#ec633f', '#7246be', '#5cbb7f', '#3672f6', '#e9752e', '#9c1ff5']
} else {
tipFormat = data.value.tipFormat
formatter = data.value.formatter
source = data.value.source
colors = data.value.colors || ['#73DEB3', '#F2D459', '#4DC2FF', '#E6645D', '#A285D2', '#b2fcb6', '#f09278', '#eb5ac8', '#8ec55e', '#5bb3f9', '#eda93b', '#c028ec', '#ec633f', '#7246be', '#5cbb7f', '#3672f6', '#e9752e', '#9c1ff5']
}
return {
// 数据集
dataset: { source },
tooltip: {
show: true,
formatter: tipFormat || formatter
},
legend: {
type: 'scroll', // type 普通模式，滚动模式
icon: 'circle',
bottom: 12 * rate,
left: 'center',
padding: [0, 10 * rate], // 与 left top 类似
itemGap: 36 * rate, // 图例间距
itemWidth: 9 * rate, // 图标宽度
itemHeight: 9 * rate, // 图标高度
pageIconSize: 12 * rate, // 滚动icon大小
pageIconInactiveColor: '#0933AA', // 默认颜色
pageIconColor: '#4DC2FF', // 激活颜色
pageTextStyle: {
color: '#D0E0FF'
},
textStyle: {
color: '#D0E0FF',
fontSize: 12 * rate,
lineHeight: 14 * rate
}
},
series: [
{
type: 'pie', // 图表类型
radius: [0, 140 / 2 * rate], // 圆环半径
left: 'center',
top: 9 * rate, // 中心偏移
color: colors,
clockwise: false, // 顺时针 true 混乱 false
minAngle: 5, // 最小占比
height: 210 * rate,
label: {
show: true,
fontSize: 12 * rate,
color: '#D0E0FF',
formatter,
padding: [0, -60 * rate, 0, -60 * rate],
// textStyle: {
// color: '#D0E0FF',
// fontSize: 12 * rate,
// lineHeight: 14 * rate
// }
},
labelLine: {
show: true,
length: 16 * rate,
length2: 96 * rate,
lineStyle: {
color: '#D0E0FF',
width: 0.5
}
},
emphasis: {
scaleSize: 6 * rate
},
}
]
}
}
const select = val => {
// chart.value.showLoading(loadingConfig())
// loading.value = true
showBack.value = false
emit('select', val)
}
const back = () => {
showBack.value = false
chart.value.setOption(initOption())
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.visualization-charts-common {
width: 100%;
height: 100%;
position: relative;
background: url('~img/visualization/img-chart-bg.png') no-repeat center 20px/185px 185px;
.visualization-charts {
width: 100%;
height: 100%;
}
.back {
position: absolute;
left: 10px;
top: 10px;
width: 70px;
height: 26px;
border-radius: 4px;
background: #33539a;
font-size: 14px;
font-weight: 400;
color: #91b3f3;
line-height: 26px;
text-align: center;
padding-left: 10px;
padding-right: 26px;
cursor: pointer;
}
}
</style>
// 使用
<template>
<div class="visualization-page-container">
<div class="visualization-content">
<!-- 上 -->
<div class="section col-3">
<!-- 左 -->
<div class="section-wrapper">
<div class="section-block">
<!-- 曲线图 -->
<Title title="科研成果近五年趋势"></Title>
<Wrapper
:loading="trend5YearLoading"
:data="trend5YearData"
showEmpty>
<div class="charts-line-wrapper">
<ChartsLine :data="trend5YearData"></ChartsLine>
</div>
</Wrapper>
</div>
</div>
<!-- 中 -->
<div class="section-wrapper">
<div class="section-block">
<!-- 环形图 -->
<Title title="科研成果总体概况"></Title>
<Wrapper
:loading="trendOverviewLoading"
:data="trendOverviewData"
showEmpty>
<div class="charts-line-wrapper">
<ChartsCircle
:data="trendOverviewData"
:selectOptions="trendOverviewSelectOptions"
@select="trendOverviewSelect">
</ChartsCircle>
</div>
</Wrapper>
</div>
</div>
<!-- 右 -->
<div class="section-wrapper">
<div class="section-block">
<!-- 词云图 -->
<Title title="研究方向"></Title>
<Wrapper
:loading="keywordLoading"
:data="keywordData"
showEmpty>
<div class="charts-line-wrapper">
<ChartsKeyword :data="keywordData"></ChartsKeyword>
</div>
</Wrapper>
</div>
</div>
</div>
<!-- 中 -->
<div class="section col-3">
<div class="section-wrapper">
<div class="section-block">
<!-- 曲线图 -->
<Title title="各院系科研成果情况"></Title>
<Wrapper
:loading="departmentAchievLoading"
:data="departmentAchievData"
showEmpty>
<div class="charts-line-wrapper">
<ChartsLine
:data="departmentAchievData"
:selectOptions="departmentAchievSelectOptions"
@select="departmentAchievSelect">
</ChartsLine>
</div>
</Wrapper>
</div>
</div>
<div class="section-wrapper">
<div class="section-block">
<!-- 饼状图 -->
<Title title="科研论文语种情况"></Title>
<Wrapper
:loading="langLoading"
:data="langData"
showEmpty>
<div class="charts-line-wrapper">
<ChartsPie
:data="langData"
:selectOptions="langSelectOptions"
@select="langSelect">
</ChartsPie>
</div>
</Wrapper>
</div>
</div>
<div class="section-wrapper">
<div class="section-block">
<!-- 柱状图 -->
<Title title="研究方向负责人情况"></Title>
<Wrapper
:loading="directionLoading"
:data="directionData"
showEmpty>
<div class="charts-line-wrapper">
<!-- :radioOptions="directionRadioOptions" -->
<ChartsColumn
:data="directionData"
:selectOptions="directionSelectOptions"
@select="directionSelect"
@change="directionChange">
</ChartsColumn>
</div>
</Wrapper>
</div>
</div>
</div>
<!-- 下 -->
<div class="section col-2">
<!-- 左 -->
<div class="section-wrapper">
<div class="section-block">
<!-- 柱状图 -->
<Title title="科研专利类型情况TOP"></Title>
<Wrapper
:loading="categoryLoading"
:data="categoryData"
showEmpty>
<div class="charts-line-wrapper">
<ChartsLevel
:data="categoryData"
:selectOptions="categorySelectOptions"
:radioOptions="categoryRadioOptions"
@select="categorySelect"
@change="categoryChange">
</ChartsLevel>
</div>
</Wrapper>
</div>
</div>
<!-- 右 -->
<div class="section-wrapper">
<div class="section-block">
<!-- 柱状图 -->
<Title title="著作类别情况TOP"></Title>
<Wrapper
:loading="bookCategoryLoading"
:data="bookCategoryData"
showEmpty>
<div class="charts-line-wrapper">
<ChartsLevel
:data="bookCategoryData"
:selectOptions="bookCategorySelectOptions"
:radioOptions="bookCategoryRadioOptions"
@select="bookCategorySelect"
@change="bookCategoryChange">
</ChartsLevel>
</div>
</Wrapper>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onBeforeMount } from 'vue'
import Router from '@/router'
import { countDate, dict } from 'utils'
import {
trend5Year, // 5年趋势
departmentAchiev, // 各科成果
trendOverview, // 科研成果总体
articleLang, // 论文语种
directionKeyword, // 研究方向词云
directionPerson, // 研究方向负责人
patentCategory, // 专利类型
bookCategory // 著作类别
} from '../service'
import Title from '../components/Title.vue'
import Wrapper from '../components/Wrapper.vue';
import ChartsLine from '../charts/ChartsLine.vue';
import ChartsCircle from '../charts/ChartsCircle';
import ChartsKeyword from '../charts/ChartsKeyword.vue';
import ChartsPie from '../charts/ChartsPie.vue';
import ChartsColumn from '../charts/ChartsColumn.vue';
import ChartsLevel from '../charts/ChartsLevel.vue'
let id = ref('')
// 5年趋势
let trend5YearData = ref({})
let trend5YearLoading = ref(true)
// 各科成果
let departmentAchievData = ref({})
let departmentAchievSelectOptions = ref([])
let departmentAchievSelectAct = ref('')
let departmentAchievLoading = ref(true)
// 科研总体
let trendOverviewData = ref({})
let trendOverviewSelectOptions = ref([])
let trendOverviewSelectAct = ref('')
let trendOverviewLoading = ref(true)
// 论文语种
let langData = ref({})
let langSelectOptions = ref([])
let langSelectAct = ref('')
let langLoading = ref(true)
// 研究方向词云
let keywordData = ref({})
let keywordLoading = ref(true)
// 研究方向
let directionData = ref({})
let directionSelectOptions = ref([])
let directionSelectAct = ref('')
let directionRadioOptions = ref([]) // 暂时弃用
let directionRadioAct = ref('') // 暂时弃用
let directionLoading = ref(true)
// 专利类型
let categoryData = ref({})
let categorySelectOptions = ref([])
let categorySelectAct = ref('')
let categoryRadioOptions = ref([])
let categoryRadioAct = ref('')
let categoryLoading = ref(true)
// 著作类别
let bookCategoryData = ref()
let bookCategorySelectOptions = ref([])
let bookCategorySelectAct = ref('')
let bookCategoryRadioOptions = ref([])
let bookCategoryRadioAct = ref('')
let bookCategoryLoading = ref(true)
onBeforeMount(() => {
if (Router.mode === 'history') {
id.value = Router.history.current.params.id
} else {
id.value = Router.history.current.query.id
}
// 获取数据
getTrend5Year() // 5年趋势
getDepartmentAchiev() // 各科成果
getTrendOverview() // 科研成果总体概况
getLang() // 论文语种
getKeyword() // 研究方向词云
getDirection() // 研究方向负责人
getCategory() // 专利类型
getBookCategory() // 著作类别
})
// 5年趋势
const getTrend5Year = () => {
trend5YearLoading.value = true
trend5Year({ collegeCode: id.value }).then(({ data }) => {
if (data) {
const source = data.map(item => ({
year: item.year,
'论文数量': item.lw,
'专利数量': item.zl,
'著作数量': item.zz
}))
trend5YearData.value = {
legend: true, // 是否显示图例
dimensions: ['year', '论文数量', '专利数量', '著作数量'],
source,
colors: [
['rgba(77,194,255,1)', 'rgba(25,104,255,0)'],
['rgba(252,193,72,1)', 'rgba(252,193,72,0)'],
['rgba(115,222,179,1)', 'rgba(115,222,179,0)']
]
}
}
trend5YearLoading.value = false
// console.log(trend5YearData.value)
})
}
// 各科成果
const getDepartmentAchiev = () => {
departmentAchievLoading.value = true
// 筛选项
departmentAchievSelectOptions.value = countDate()
const select =
departmentAchievSelectAct.value ||
departmentAchievSelectOptions.value[0].value
// 数据
departmentAchiev({ collegeCode: id.value, time: select }).then(({ data }) => {
if (data) {
const source = data.map(item => ({
name: item.name,
'获奖成果': item.hjCount,
'论文数量': item.lwCount,
'专利数量': item.zlCount,
'著作数量': item.zzCount
}))
departmentAchievData.value = {
// 配置项
legend: true, // 是否显示图例
rotate: 45,
// 数据
dimensions: ['name', '获奖成果', '论文数量', '专利数量', '著作数量'],
source,
colors: [
['rgba(232,104,74,1)', 'rgba(232,104,74,0)'],
['rgba(77,194,255,1)', 'rgba(25,104,255,0)'],
['rgba(252,193,72,1)', 'rgba(252,193,72,0)'],
['rgba(115,222,179,1)', 'rgba(115,222,179,0)']
]
}
}
departmentAchievLoading.value = false
// console.log(trend5YearData.value)
})
}
const departmentAchievSelect = val => {
departmentAchievSelectAct.value = val
getDepartmentAchiev()
}
// 成果总体概况
const getTrendOverview = () => {
trendOverviewLoading.value = true
// 筛选项
trendOverviewSelectOptions.value = countDate()
const select =
trendOverviewSelectAct.value ||
trendOverviewSelectOptions.value[0].value
// 数据
trendOverview({ collegeCode: id.value, time: select }).then(({ data }) => {
if (data) {
trendOverviewData.value = {
tipFormat: ({ data: { name, count, ratio } }) => {
return `${name}：<br/>${count} | ${ratio}`
},
formatter: '{b}\n\n{d}%',
source: data,
colors: ['#73DEB3', '#F2D459', '#4DC2FF', '#E6645D', '#A285D2']
}
}
trendOverviewLoading.value = false
// console.log('trendoverview', trendOverviewData.value)
})
}
const trendOverviewSelect = val => {
trendOverviewSelectAct.value = val
getTrendOverview()
}
// 论文语种
const getLang = () => {
langLoading.value = true
// 筛选项
langSelectOptions.value = countDate()
const select =
langSelectAct.value ||
langSelectOptions.value[0].value
// 数据
articleLang({ collegeCode: id.value, time: select }).then(({ data }) => {
if (data) {
langData.value = {
tipFormat: ({ data: { name, count, ratio } }) => {
return `${name}：<br/>${count} | ${ratio}`
},
formatter: ({ data }) => {
return `${data.name}\n\n${data.ratio}`
},
source: data
}
// console.log('langData', langData.value)
}
langLoading.value = false
})
}
const langSelect = val => {
langSelectAct.value = val
getLang()
}
// 研究词云
const getKeyword = () => {
keywordLoading.value = true
directionKeyword({ collegeCode: id.value, }).then(({ data }) => {
if (data) {
keywordData.value = { source: data }
}
keywordLoading.value = false
// console.log('keyword', keywordData.value)
})
}
// 研究负责人
const getDirection = () => {
directionLoading.value = true
// 筛选项
directionSelectOptions.value = countDate()
const select =
directionSelectAct.value ||
directionSelectOptions.value[0].value
directionRadioOptions.value = dict.top
let radio =
directionRadioAct.value ||
directionRadioOptions.value[0].value
// 数据
directionPerson({ collegeCode: id.value, time: select, sort: radio }).then(({ data }) => {
if (data) {
directionData.value = {
legend: false,
rotate: 45,
formatter: params => {
let temp = params && params[0]
if (temp) {
let { data: { name: label, value } } = temp
return `${label} ${value}`
}
return ''
},
source: data,
colors: [
['rgba(77,194,255,1)', 'rgba(25,104,255,0.3)'],
]
}
// console.log('directionData', directionData.value)
} else {
directionData.value = {
legend: false,
rotate: 45,
formatter: params => {
let temp = params && params[0]
if (temp) {
let { data: { name: label, value } } = temp
return `${label} ${value}`
}
return ''
},
source: [],
colors: [
['rgba(77,194,255,1)', 'rgba(25,104,255,0.3)'],
]
}
}
directionLoading.value = false
})
}
const directionSelect = val => {
directionSelectAct.value = val
getDirection()
}
const directionChange = val => {
directionRadioAct.value = val
getDirection()
}
// 专利情况
const getCategory = () => {
categoryLoading.value = true
// 筛选项
categorySelectOptions.value = countDate()
const select =
categorySelectAct.value ||
categorySelectOptions.value[0].value
categoryRadioOptions.value = dict.radio
const radio =
categoryRadioAct.value ||
categoryRadioOptions.value[0].value
// 数据
patentCategory({ collegeCode: id.value, time: select, sort: radio }).then(({ data }) => {
if (data) {
categoryData.value = {
legend: false,
dot: 0,
formatter: params => {
let temp = params && params[0]
if (temp) {
let { data: { name: label, count: value } } = temp
return `${label} ${value}`
}
return ''
},
source: data,
colors: [
['rgba(86,188,237,1)', 'rgba(74,87,186,1)'],
]
}
// console.log('categoryData', categoryData.value)
}
categoryLoading.value = false
})
}
const categorySelect = val => {
categorySelectAct.value = val
getCategory()
}
const categoryChange = val => {
categoryRadioAct.value = val
getCategory()
}
// 著作类别
const getBookCategory = () => {
bookCategoryLoading.value = true
// 筛选项
bookCategorySelectOptions.value = countDate()
const select =
bookCategorySelectAct.value ||
bookCategorySelectOptions.value[0].value
bookCategoryRadioOptions.value = dict.radio
let radio =
bookCategoryRadioAct.value ||
bookCategoryRadioOptions.value[0].value
// 数据
bookCategory({ collegeCode: id.value, time: select, sort: radio }).then(({ data }) => {
if (data) {
bookCategoryData.value = {
legend: false,
dot: 1,
formatter: params => {
let temp = params && params[0]
if (temp) {
let { data: { name: label, count: value } } = temp
return `${label} ${value}`
}
return ''
},
source: data,
colors: [
['rgba(115,222,179,1)', 'rgba(77,194,255,1)'],
]
}
// console.log('bookCategoryData', bookCategoryData.value)
} else {
bookCategoryData.value = {
legend: false,
dot: 1,
formatter: params => {
let temp = params && params[0]
if (temp) {
let { data: { name: label, count: value } } = temp
return `${label} ${value}`
}
return ''
},
source: [],
colors: [
['rgba(115,222,179,1)', 'rgba(77,194,255,1)'],
]
}
}
bookCategoryLoading.value = false
})
}
const bookCategorySelect = val => {
bookCategorySelectAct.value = val
getBookCategory()
}
const bookCategoryChange = val => {
bookCategoryRadioAct.value = val
getBookCategory()
}
</script>
<style lang="scss" scoped>
.visualization-page-container {
.visualization-content {
padding-left: 120px;
padding-right: 0; // 24px;
.section {
@include flexbox;
flex-wrap: wrap;
.section-block {
height: 294px;
margin-top: 24px;
}
&.col-2 {
.section-wrapper {
width: 50%;
}
.section-block {
width: 874px;
}
}
&.col-3 {
.section-wrapper {
width: 33.33%;
}
.section-block {
width: 576px;
}
}
}
.charts-line-wrapper {
width: 100%;
height: 246px;
}
}
}
</style>
