大屏修改
This commit is contained in:
parent
86990be462
commit
9194312129
|
|
@ -9,7 +9,6 @@ declare module 'vue' {
|
|||
export interface GlobalComponents {
|
||||
BarCom: typeof import('./src/components/echartsCom/barCom.vue')['default']
|
||||
CloudWords: typeof import('./src/components/echartsCom/CloudWords.vue')['default']
|
||||
copy: typeof import('./src/components/mapBaidu/mapLine copy.vue')['default']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
|
|
@ -20,13 +19,10 @@ declare module 'vue' {
|
|||
EquipmentDialog: typeof import('./src/components/customCom/equipmentDialog.vue')['default']
|
||||
EquipmentLeasing: typeof import('./src/components/customCom/equipmentLeasing.vue')['default']
|
||||
HotProvider: typeof import('./src/components/customCom/hotProvider.vue')['default']
|
||||
LineCom: typeof import('./src/components/echarts/lineCom.vue')['default']
|
||||
Map: typeof import('./src/components/echarts/map.vue')['default']
|
||||
MapEcharts: typeof import('./src/components/echarts/mapEcharts.vue')['default']
|
||||
MapEcharts2: typeof import('./src/components/echartsCom/mapEcharts2.vue')['default']
|
||||
LineCom: typeof import('./src/components/echartsCom/lineCom.vue')['default']
|
||||
MapEcharts: typeof import('./src/components/echartsCom/mapEcharts.vue')['default']
|
||||
MapLine: typeof import('./src/components/mapBaidu/mapLine.vue')['default']
|
||||
Pie3dCom: typeof import('./src/components/echartsCom/Pie3dCom.vue')['default']
|
||||
Pie3dCom1: typeof import('./src/components/echartsCom/Pie3dCom1.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
/// <reference types="vite/client" />
|
||||
declare module "nprogress"
|
||||
declare module "BMap"
|
||||
declare module "BMapGL"
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
||||
<script src="http://mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
|
||||
<script src="http://api.map.baidu.com/api?type=webgl&v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
||||
<script src="http://mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
|
||||
<script src="http://api.map.baidu.com/api?type=webgl&v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
"scripts": {
|
||||
"dev": "vite --mode dev",
|
||||
"build": "npm run build:pro",
|
||||
"build:sit": "vue-tsc && vite build --mode sit",
|
||||
"build:uat": "vue-tsc && vite build --mode uat",
|
||||
"build:pro": "vue-tsc && vite build --mode production",
|
||||
"build:sit": "vite build --mode sit",
|
||||
"build:uat": "vite build --mode uat",
|
||||
"build:pro": "&& vite build --mode production",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
|
|
@ -1,170 +0,0 @@
|
|||
<template>
|
||||
<div style="width: 100%; height: 100%" id="lineEchartDom"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, defineProps } from "vue";
|
||||
const propsVal = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '折线图'
|
||||
},
|
||||
legendDataList: {//图例组件的数据
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
legendProps: {//图例组件的基本配置
|
||||
type: Object,
|
||||
default: {
|
||||
right: 30,
|
||||
top: 30,
|
||||
itemHeight: 10,
|
||||
itemGap: 10,
|
||||
icon: "circle",//可选 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
||||
textStyle: {//文字颜色
|
||||
color: "#333333"
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {//网格的配置
|
||||
type: Object,
|
||||
default: {
|
||||
top: "15%",//组件距离容器 上侧 的距离
|
||||
left: "3%",//组件距离容器 左侧 的距离
|
||||
right: "4%",//组件距离容器 右侧 的距离
|
||||
bottom: "3%",//组件距离容器 下侧 的距离
|
||||
containLabel: true,//组件距离容器 上侧 的距离
|
||||
}
|
||||
},
|
||||
FeatureList: {//工具配置项显示
|
||||
type: Array,
|
||||
default: []//['saveAsImage','restore','dataView',"dataZoom",'magicType','brush']
|
||||
},
|
||||
xAxisData: {//x 坐标轴数据
|
||||
type: Array,
|
||||
default: []
|
||||
//'value' 数值轴，适用于连续数据
|
||||
// 'category'
|
||||
// time 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度
|
||||
// 'log' 对数轴。适用于对数数据。
|
||||
},
|
||||
xAxisProps: {//x 坐标轴配置
|
||||
type: Object,
|
||||
defualt: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
}
|
||||
},
|
||||
yAxisProps: {//y 坐标轴配置
|
||||
type: Object,
|
||||
default: {
|
||||
type: "value"
|
||||
}
|
||||
},
|
||||
seriesMultipleFlag: {//是否开启多组数据
|
||||
type: Boolean,
|
||||
defult: false
|
||||
},
|
||||
seriseSingleName: {//单组 的名称
|
||||
type: Array,
|
||||
default: ""
|
||||
},
|
||||
seriseSingleData: {//单组的 数据
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
seriseMultipleName: {//多组的名称
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
seriseMultipleData: {//多组的数据
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: [
|
||||
'#80FFA5',
|
||||
'#00DDFF',
|
||||
'#37A2FF',
|
||||
'#FF0087',
|
||||
'#FFBF00'
|
||||
]
|
||||
},
|
||||
formatCallBack: {
|
||||
type: Function,
|
||||
default: () => { }
|
||||
}
|
||||
})
|
||||
let myChart: any = null
|
||||
|
||||
onMounted(() => {
|
||||
const lineEchartDomEl = document.getElementById("lineEchartDom");
|
||||
myChart = echarts.init(lineEchartDomEl);
|
||||
console.log("mychart", myChart)
|
||||
myChart.setOption(option);
|
||||
|
||||
})
|
||||
const handleSeriesData = () => {
|
||||
const seriesData: any = []
|
||||
if (!propsVal.seriesMultipleFlag) {
|
||||
seriesData.push({
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
name: propsVal.seriseSingleName,
|
||||
data: propsVal.seriseSingleData
|
||||
})
|
||||
} else {
|
||||
propsVal.seriseMultipleName.forEach((ele, index) => {
|
||||
const item = {
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
name: ele,
|
||||
data: propsVal.seriseMultipleData[index]
|
||||
}
|
||||
seriesData.push(item)
|
||||
})
|
||||
}
|
||||
console.log("seriesData: ", seriesData)
|
||||
return seriesData
|
||||
}
|
||||
const option = {
|
||||
title: {
|
||||
text: propsVal.title,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: propsVal.legendDataList,
|
||||
...propsVal.legendProps
|
||||
},
|
||||
grid: propsVal.grid,
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: propsVal.FeatureList.includes("saveAsImage") ? {} : null,
|
||||
restore: propsVal.FeatureList.includes("restore") ? {} : null,
|
||||
dataView: propsVal.FeatureList.includes("dataView") ? {} : null,
|
||||
magicType: propsVal.FeatureList.includes("magicType") ? {} : null,
|
||||
brush: propsVal.FeatureList.includes("brush") ? {} : null
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: propsVal.xAxisData,
|
||||
...propsVal.xAxisProps
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
|
||||
},
|
||||
series: handleSeriesData(),
|
||||
color: propsVal.color,
|
||||
formatter: function (params: any) {
|
||||
console.log("parmas", params)
|
||||
return propsVal.formatCallBack(params)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
<template>
|
||||
<div id="demo" class="echart-demo"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 引入echart和json数据
|
||||
import * as echarts from 'echarts';
|
||||
import { onMounted } from 'vue';
|
||||
import shanDong from './mapData/gd_gx.json';
|
||||
|
||||
// 设置echart数据
|
||||
const setOption = () => {
|
||||
// 获取echart对象
|
||||
const dom = document.getElementById('demo');
|
||||
if (dom) {
|
||||
// 初始化
|
||||
const myEchart = echarts.init(dom);
|
||||
// 注册地图
|
||||
echarts.registerMap('山东', shanDong);
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
name: '山东省数据',
|
||||
type: 'map',
|
||||
map: '山东', // 自定义扩展图表类型
|
||||
showLegendSymbol: true, // 存在legend时显示
|
||||
label: {
|
||||
// 文字
|
||||
show: true,
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
},
|
||||
itemStyle: {
|
||||
// 地图样式
|
||||
areaColor: '#282C34', // 区域颜色
|
||||
borderColor: '#ffffff', // 边框颜色
|
||||
borderWidth: 1,
|
||||
},
|
||||
emphasis: {
|
||||
// 鼠标移入时显示的默认样式
|
||||
itemStyle: {
|
||||
areaColor: '#4adcf0',
|
||||
borderColor: '#404a59',
|
||||
borderWidth: 1,
|
||||
},
|
||||
label: {
|
||||
// 文字
|
||||
show: true,
|
||||
color: '#0D5EFF',
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
myEchart.setOption(option);
|
||||
window.addEventListener('resize', function () {
|
||||
myEchart.resize();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setOption();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.echart-demo {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
<template>
|
||||
<div ref="mapEcharts" style="width: 100%;height: 100%;"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts'
|
||||
import gdGxJSON from './gd-gx.json'
|
||||
import { ref, nextTick, onMounted } from 'vue'
|
||||
const mapEcharts = ref(null)
|
||||
const getImg = () => {
|
||||
return new URL(`/src/components/echartsCom/img/hover_bg.png`, import.meta.url).href;
|
||||
}
|
||||
const initEcharts = () => {
|
||||
echarts.registerMap('guangdong', gdGxJSON)
|
||||
nextTick(() => {
|
||||
const map = echarts.init(mapEcharts.value, null, {
|
||||
renderer: 'canvas',
|
||||
})
|
||||
const option = {
|
||||
title: {
|
||||
text: '广东-广西-地图',
|
||||
left: 'center',
|
||||
},
|
||||
// 悬浮窗
|
||||
tooltip: {
|
||||
trigger: 'item',//触发条件
|
||||
},
|
||||
geo: {
|
||||
map: 'guangdong',
|
||||
zoom: 1,
|
||||
roam: 'move',
|
||||
label: {
|
||||
show: true,
|
||||
color: 'black',
|
||||
position: 'inside',
|
||||
distance: 0,
|
||||
fontSize: 10,
|
||||
rotate: 45,
|
||||
},
|
||||
// 所有地图的区域颜色
|
||||
itemStyle: {
|
||||
areaColor: '#000',
|
||||
borderColor: '#02c0ff',
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
areaColor: '#aaa',
|
||||
shadowColor: 'rgba(0,0,0,0.8)',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: (params: any) => {
|
||||
console.log("params11", params)
|
||||
const curItem = mapDataByProvice(params.name)
|
||||
let fromatStr =
|
||||
`<div style="background:url(${getImg()});width:120px;height:70px;background-size:contain;background-repeat:no-repeat;">
|
||||
<div style="width: 100px;height: 90px;padding-top:4px;">
|
||||
<div style="width: 100px;height: 14px;box-sizing: content-box;padding-bottom: 8px;text-align: right;">
|
||||
${curItem.selfCount}
|
||||
</div>
|
||||
<div style="width: 100px;height: 14px;box-sizing: content-box;padding-bottom: 8px;text-align: right;">
|
||||
${curItem.toCount}
|
||||
</div>
|
||||
<div style="width: 100px;height: 14px;box-sizing: content-box;padding-bottom: 8px;text-align: right;">
|
||||
${curItem.inCount}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
return fromatStr
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: [{ name: '肇庆市', value: [112.48461, 23.05196, 20] },
|
||||
{ name: '佛山市', value: [113.130234, 23.018978, 30] },
|
||||
{ name: '广州', value: [113.261081, 23.139856, 10] }],
|
||||
symbolSize: function (val: any) {
|
||||
return val[2] / 15;
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#9eff9e'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Top 5',
|
||||
type: 'effectScatter',
|
||||
colorBy: 'series',
|
||||
effectType: 'ripple',
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
color: '#9eff9e',
|
||||
number: 4,
|
||||
period: 4,
|
||||
scale: 4.5,
|
||||
brushType: 'fill'
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#9eff9e'
|
||||
}
|
||||
},
|
||||
coordinateSystem: 'geo',
|
||||
data: [{ name: '肇庆市', value: [112.48461, 23.05196, 20] },
|
||||
{ name: '佛山市', value: [113.130234, 23.018978, 30] },
|
||||
{ name: '广州', value: [113.261081, 23.139856, 10] }],
|
||||
}
|
||||
],
|
||||
}
|
||||
map.setOption(option)
|
||||
})
|
||||
}
|
||||
const mapDataByProvice = (provinceName: String) => {
|
||||
let listData = [
|
||||
{
|
||||
name: "广东省",
|
||||
selfCount: 123,
|
||||
toCount: 300,
|
||||
inCount: 987
|
||||
},
|
||||
{
|
||||
name: "广西壮族自治区",
|
||||
selfCount: 23,
|
||||
toCount: 55,
|
||||
inCount: 278
|
||||
},
|
||||
]
|
||||
const curItem: any = listData.find(ele => ele.name == provinceName)
|
||||
return curItem
|
||||
}
|
||||
onMounted(() => {
|
||||
initEcharts()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-echart {
|
||||
height: 600px;
|
||||
width: 900px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,246 +0,0 @@
|
|||
<template>
|
||||
<div id="pie3dDom" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
<script setup>
|
||||
import highcharts from "highcharts";
|
||||
import { fontChart } from "@/utils/echart";
|
||||
import { onMounted, watch, onUnmounted } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => ([
|
||||
{
|
||||
name: "红草莓",
|
||||
y: 2,
|
||||
h: 2,
|
||||
bfb: 2,
|
||||
},
|
||||
{
|
||||
name: "白草莓",
|
||||
y: 2,
|
||||
h: 2,
|
||||
bfb: 2,
|
||||
},
|
||||
{
|
||||
name: "红颜草莓",
|
||||
y: 2,
|
||||
h: 2,
|
||||
bfb: 2,
|
||||
},
|
||||
// {
|
||||
// name: "甜宝草莓",
|
||||
// y: 15687,
|
||||
// h: 9,
|
||||
// bfb: 11,
|
||||
// },
|
||||
// {
|
||||
// name: "红颜草莓",
|
||||
// y: 15687,
|
||||
// h: 8,
|
||||
// bfb: 13,
|
||||
// },
|
||||
// {
|
||||
// name: "甜宝草莓",
|
||||
// y: 15687,
|
||||
// h: 36,
|
||||
// bfb: 18,
|
||||
// },
|
||||
]),
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(newValue) => {
|
||||
initOption();
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
initOption();
|
||||
window.addEventListener('resize', initOption)
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", initOption);
|
||||
});
|
||||
// 初始化echarts
|
||||
const initOption = () => {
|
||||
let quantity = 0; // 总数
|
||||
props.dataList.forEach((item) => {
|
||||
quantity += item.y;
|
||||
});
|
||||
props.dataList.forEach((item) => {
|
||||
item.bfb = parseInt((item.y / quantity) * 100);
|
||||
item.h = item.bfb * 1.5 >= 70 ? 70 : item.bfb * 1.5
|
||||
// item.h = parseInt(0.86 * item.bfb); // 最高高度60，根据比例渲染高度
|
||||
// console.log(props.dataList, "dataList----->>>");
|
||||
});
|
||||
// 修改3d饼图绘制过程
|
||||
var each = highcharts.each,
|
||||
round = Math.round,
|
||||
cos = Math.cos,
|
||||
sin = Math.sin,
|
||||
deg2rad = Math.deg2rad;
|
||||
highcharts.wrap(
|
||||
highcharts.seriesTypes.pie.prototype,
|
||||
"translate",
|
||||
function (proceed) {
|
||||
proceed.apply(this, [].slice.call(arguments, 1));
|
||||
// Do not do this if the chart is not 3D
|
||||
if (!this.chart.is3d()) {
|
||||
return;
|
||||
}
|
||||
var series = this,
|
||||
chart = series.chart,
|
||||
options = chart.options,
|
||||
seriesOptions = series.options,
|
||||
depth = seriesOptions.depth || 0,
|
||||
options3d = options.chart.options3d,
|
||||
alpha = options3d.alpha,
|
||||
beta = options3d.beta,
|
||||
z = seriesOptions.stacking
|
||||
? (seriesOptions.stack || 0) * depth
|
||||
: series._i * depth;
|
||||
z += depth / 2;
|
||||
if (seriesOptions.grouping !== false) {
|
||||
z = 0;
|
||||
}
|
||||
each(series.data, function (point) {
|
||||
var shapeArgs = point.shapeArgs,
|
||||
angle;
|
||||
point.shapeType = "arc3d";
|
||||
var ran = point.options.h;
|
||||
shapeArgs.z = z;
|
||||
shapeArgs.depth = depth * 0.75 + ran;
|
||||
shapeArgs.alpha = alpha;
|
||||
shapeArgs.beta = beta;
|
||||
shapeArgs.center = series.center;
|
||||
shapeArgs.ran = ran;
|
||||
angle = (shapeArgs.end + shapeArgs.start) / 2;
|
||||
point.slicedTranslation = {
|
||||
translateX: round(
|
||||
cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
|
||||
),
|
||||
translateY: round(
|
||||
sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
|
||||
),
|
||||
};
|
||||
});
|
||||
}
|
||||
);
|
||||
(function (H) {
|
||||
H.wrap(highcharts.SVGRenderer.prototype, "arc3dPath", function (proceed) {
|
||||
// Run original proceed method
|
||||
var ret = proceed.apply(this, [].slice.call(arguments, 1));
|
||||
ret.zTop = (ret.zOut + 0.5) / 100;
|
||||
return ret;
|
||||
});
|
||||
})(highcharts);
|
||||
highcharts.chart("pie3dDom", {
|
||||
chart: {
|
||||
animation: false,
|
||||
backgroundColor: "none",
|
||||
type: "pie", //饼图
|
||||
margin: [0, 0, 0, 0],
|
||||
options3d: {
|
||||
enabled: true, //使用3d功能
|
||||
alpha: 58, //延y轴向内的倾斜角度
|
||||
beta: 0,
|
||||
},
|
||||
events: {
|
||||
load: function () {
|
||||
var each = highcharts.each,
|
||||
points = this.series[0].points;
|
||||
each(points, function (p, i) {
|
||||
p.graphic.attr({
|
||||
translateY: -p.shapeArgs.ran,
|
||||
});
|
||||
p.graphic.side1.attr({
|
||||
translateY: -p.shapeArgs.ran,
|
||||
});
|
||||
p.graphic.side2.attr({
|
||||
translateY: -p.shapeArgs.ran,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
enabled: true, // 关闭图例
|
||||
align: "right", //水平方向位置
|
||||
verticalAlign: "top", //垂直方向位置
|
||||
layout: "vertical",
|
||||
x: fontChart(0),
|
||||
y: fontChart(30),
|
||||
symbolWidth: fontChart(10),
|
||||
symbolHeight: fontChart(10),
|
||||
symbolRadius: "50%", // 修改成圆
|
||||
itemMarginBottom: fontChart(8),
|
||||
labelFormat: "{name} {y}",
|
||||
itemStyle: {
|
||||
color: "#f4f4f6",
|
||||
fontSize: fontChart(12),
|
||||
},
|
||||
},
|
||||
title: {
|
||||
// enabled: false,
|
||||
text: "",
|
||||
},
|
||||
subtitle: {
|
||||
text: "",
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: false, // 禁用点击
|
||||
cursor: "pointer",
|
||||
depth: fontChart(45),
|
||||
showInLegend: true,
|
||||
size: "65%", // 外圈直径大小
|
||||
innerSize: fontChart(95), // 内圈直径大小
|
||||
center: ["30%", "50%"],
|
||||
colors: [
|
||||
"rgba(227, 165, 86, 1)",
|
||||
"rgba(10, 204, 168, 1)",
|
||||
"rgba(35, 79, 206,1)",
|
||||
"rgba(16, 138, 174, .9)",
|
||||
"rgba(0, 77, 161, .9)",
|
||||
"rgba(60, 32, 173, .9)",
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: true, //是否显示饼图的线形tip
|
||||
distance: fontChart(0),
|
||||
align: "center",
|
||||
position: "center",
|
||||
format: "{point.bfb}%",
|
||||
// formatter: (point,b) => {
|
||||
// console.log(point,'ponit-->>')
|
||||
// console.log(b,'ponit-->>')
|
||||
// },
|
||||
style: {
|
||||
fontSize: fontChart(13),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
credits: {
|
||||
enabled: false, // 禁用版权信息
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
name: "Browser share",
|
||||
data: props.dataList,
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,299 +0,0 @@
|
|||
<template>
|
||||
<div >
|
||||
<div id="main" style="width: 600px;height:600px ;margin: 100px auto;"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/map/js/china'
|
||||
export default {
|
||||
mounted() {
|
||||
var data = [
|
||||
{
|
||||
name:'沈阳',
|
||||
value:100
|
||||
},
|
||||
{
|
||||
name:'长春',
|
||||
value:101
|
||||
},
|
||||
{
|
||||
name:'哈尔滨',
|
||||
value:150
|
||||
},
|
||||
{
|
||||
name:'北京',
|
||||
value:100
|
||||
},
|
||||
{
|
||||
name:'天津',
|
||||
value:100
|
||||
},
|
||||
{
|
||||
name:'呼和浩特',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'银川',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'太原',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'石家庄',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'济南',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'郑州',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'西安',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'武汉',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'南京',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'合肥',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'上海',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'长沙',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'南昌',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'杭州',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'福州',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'广州',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'台北',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'海口',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'南宁',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'重庆',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'昆明',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'贵阳',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'成都',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'兰州',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'西宁',
|
||||
value:200
|
||||
},
|
||||
{
|
||||
name:'拉萨',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'乌鲁木齐',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'香港',
|
||||
value:151
|
||||
},
|
||||
{
|
||||
name:'澳门',
|
||||
value:151
|
||||
},
|
||||
];
|
||||
var geoCoordMap = {
|
||||
'沈阳': [123.429092,41.796768],
|
||||
'长春': [125.324501,43.886841],
|
||||
'哈尔滨': [126.642464,45.756966],
|
||||
'北京': [116.405289,39.904987],
|
||||
'天津': [117.190186,39.125595],
|
||||
'呼和浩特': [111.751990,40.841490],
|
||||
'银川': [106.232480,38.486440],
|
||||
'太原': [112.549248,37.857014],
|
||||
'石家庄': [114.502464,38.045475],
|
||||
'济南': [117.000923,36.675808],
|
||||
'郑州': [113.665413,34.757977],
|
||||
'西安': [108.948021,34.263161],
|
||||
'武汉': [114.298569,30.584354],
|
||||
'南京': [118.76741,32.041546],
|
||||
'合肥': [117.283043,31.861191],
|
||||
'上海': [121.472641,31.231707],
|
||||
'长沙': [112.982277,28.19409],
|
||||
'南昌': [115.892151,28.676493],
|
||||
'杭州': [120.15358,30.287458],
|
||||
'福州': [119.306236,26.075302],
|
||||
'广州': [113.28064,23.125177],
|
||||
'台北': [121.5200760,25.0307240],
|
||||
'海口': [110.199890,20.044220],
|
||||
'南宁': [108.320007,22.82402],
|
||||
'重庆': [106.504959,29.533155],
|
||||
'昆明': [102.71225,25.040609],
|
||||
'贵阳': [106.713478,26.578342],
|
||||
'成都': [104.065735,30.659462],
|
||||
'兰州': [103.834170,36.061380],
|
||||
'西宁': [101.777820,36.617290],
|
||||
'拉萨': [91.11450,29.644151],
|
||||
'乌鲁木齐': [87.616880,43.826630],
|
||||
'香港': [114.165460,22.275340],
|
||||
'澳门': [113.549130,22.198750]
|
||||
};
|
||||
let convertData = function(data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
let option = {
|
||||
backgroundColor: '#fffffff',
|
||||
title: {
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#090909'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item' //鼠标悬浮效果， 删除可以不显示悬浮框
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
y: 'bottom',
|
||||
x: 'right',
|
||||
textStyle: {
|
||||
color: '#090909'
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
zoom:1, //默认显示级别
|
||||
scaleLimit:{ min:0,max:3}, //缩放级别
|
||||
label: {
|
||||
emphasis: { //对应鼠标悬浮效果
|
||||
show: false
|
||||
}
|
||||
},
|
||||
roam: true, // 是否允许拖拽。
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#9b9b9b',
|
||||
borderColor: '#111'
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#109dff'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData(data),
|
||||
symbolSize: function(val) {
|
||||
return val[2] / 15;
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#9eff9e'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Top 5',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData(data.sort(function(a, b) {
|
||||
return b.value - a.value;
|
||||
}).slice(0, 40)),
|
||||
symbolSize: function(val) {
|
||||
return val[2] / 15;
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke'
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#90ee90',
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#0a99ff'
|
||||
}
|
||||
},
|
||||
zlevel: 1
|
||||
}
|
||||
]
|
||||
};
|
||||
var myChart = echarts.init(document.getElementById('main'));
|
||||
myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import TheWelcome from '../components/TheWelcome.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<TheWelcome />
|
||||
</main>
|
||||
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="login_container">
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tabs v-model="activeName" class="demo-tabs" >
|
||||
<el-tab-pane label="账号登录" name="account">
|
||||
<el-form :model="loginForm">
|
||||
<el-form-item>
|
||||
|
|
|
|||
Loading…
Reference in New Issue