mirror of
https://gitee.com/xiaonuobase/snowy.git
synced 2025-12-25 23:56:20 +08:00
【更新】将前端示例的一些图表界面挪到另外一个仓库，默认不再长在里面
This commit is contained in:
俞宝山
parent
fd47908733
commit
01b21cc068
@ -249,6 +249,10 @@ QQ技术群：732230670（已满）、685395081
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## 示例代码
|
||||
|
||||
从 v3.6.0，我们把前端示例的一些界面文件拿到了另外一个仓库，使用时可以自行下载：[https://gitee.com/xiaonuoadmin/snowy-exm](https://gitee.com/xiaonuoadmin/snowy-exm)
|
||||
|
||||
## 代码贡献
|
||||
|
||||
近期有很多热心开源的小伙伴陆续为咱们Snowy框架提交PR或者提出好的建议，基本合格的PR我们都接受，这样您的头像就列入到咱们Snowy仓库的贡献者列表啦！
|
||||
|
||||
@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<div id="CustomizedPie"></div>
|
||||
</template>
|
||||
<!--ec官网：https://echarts.apache.org/zh/index.html-->
|
||||
<script setup name="CustomizedPie">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('CustomizedPie'))
|
||||
const option = {
|
||||
backgroundColor: '#2c343c',
|
||||
title: {
|
||||
text: 'Customized Pie',
|
||||
left: 'center',
|
||||
top: 20,
|
||||
textStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 80,
|
||||
max: 600,
|
||||
inRange: {
|
||||
colorLightness: [0, 1]
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{ value: 335, name: 'Direct' },
|
||||
{ value: 310, name: 'Email' },
|
||||
{ value: 274, name: 'Union Ads' },
|
||||
{ value: 235, name: 'Video Ads' },
|
||||
{ value: 400, name: 'Search Engine' }
|
||||
].sort(function (a, b) {
|
||||
return a.value - b.value
|
||||
}),
|
||||
roseType: 'radius',
|
||||
label: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
},
|
||||
labelLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
},
|
||||
smooth: 0.2,
|
||||
length: 10,
|
||||
length2: 20
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#c23531',
|
||||
shadowBlur: 200,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
},
|
||||
animationType: 'scale',
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<div id="DoughnutChartWithRoundedCorner"></div>
|
||||
</template>
|
||||
<!--ec官网：https://echarts.apache.org/zh/index.html-->
|
||||
<script setup name="DoughnutChartWithRoundedCorner">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('DoughnutChartWithRoundedCorner'))
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
left: 'center'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
})
|
||||
</script>
|
||||
@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<div id="NightingaleChart"></div>
|
||||
</template>
|
||||
<!--ec官网：https://echarts.apache.org/zh/index.html-->
|
||||
<script setup name="NightingaleChart">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('NightingaleChart'))
|
||||
const option = {
|
||||
legend: {
|
||||
top: 'bottom'
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
mark: { show: true },
|
||||
dataView: { show: true, readOnly: false },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true }
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Nightingale Chart',
|
||||
type: 'pie',
|
||||
radius: [20, 120],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 8
|
||||
},
|
||||
data: [
|
||||
{ value: 40, name: 'rose 1' },
|
||||
{ value: 38, name: 'rose 2' },
|
||||
{ value: 32, name: 'rose 3' },
|
||||
{ value: 30, name: 'rose 4' },
|
||||
{ value: 28, name: 'rose 5' },
|
||||
{ value: 26, name: 'rose 6' },
|
||||
{ value: 22, name: 'rose 7' },
|
||||
{ value: 18, name: 'rose 8' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<div id="RefererOfAWebsite"></div>
|
||||
</template>
|
||||
<!--ec官网：https://echarts.apache.org/zh/index.html-->
|
||||
<script setup name="RefererOfAWebsite">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('RefererOfAWebsite'))
|
||||
const option = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div id="BasicCandlestick"></div>
|
||||
</template>
|
||||
<!--ec官网：https://echarts.apache.org/zh/index.html-->
|
||||
<script setup name="BasicCandlestick">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('BasicCandlestick'))
|
||||
const option = {
|
||||
xAxis: {
|
||||
data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
|
||||
},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
type: 'candlestick',
|
||||
data: [
|
||||
[20, 34, 10, 38],
|
||||
[40, 35, 30, 50],
|
||||
[31, 38, 33, 44],
|
||||
[38, 15, 5, 42]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<div id="LargeScaleCandlestick"></div>
|
||||
</template>
|
||||
<!--ec官网：https://echarts.apache.org/zh/index.html-->
|
||||
<script setup name="LargeScaleCandlestick">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const upColor = '#ec0000'
|
||||
const upBorderColor = '#8A0000'
|
||||
const downColor = '#00da3c'
|
||||
const downBorderColor = '#008F28'
|
||||
const dataCount = 2e5
|
||||
|
||||
const getSign = (data, dataIndex, openVal, closeVal, closeDimIdx) => {
|
||||
let sign
|
||||
if (openVal > closeVal) {
|
||||
sign = -1
|
||||
} else if (openVal < closeVal) {
|
||||
sign = 1
|
||||
} else {
|
||||
// eslint-disable-next-line no-extra-parens
|
||||
sign = dataIndex > 0 ? (data[dataIndex - 1][closeDimIdx] <= closeVal ? 1 : -1) : 1
|
||||
}
|
||||
return sign
|
||||
}
|
||||
|
||||
const generateOHLC = (count) => {
|
||||
let data = []
|
||||
let xValue = Number(new Date(2011, 0, 1))
|
||||
let minute = 60 * 1000
|
||||
let baseValue = Math.random() * 12000
|
||||
let boxVals = new Array(4)
|
||||
let dayRange = 12
|
||||
for (let i = 0; i < count; i++) {
|
||||
baseValue = baseValue + Math.random() * 20 - 10
|
||||
for (let j = 0; j < 4; j++) {
|
||||
boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue
|
||||
}
|
||||
boxVals.sort()
|
||||
let openIdx = Math.round(Math.random() * 3)
|
||||
let closeIdx = Math.round(Math.random() * 2)
|
||||
if (closeIdx === openIdx) {
|
||||
closeIdx++
|
||||
}
|
||||
let volumn = boxVals[3] * (1000 + Math.random() * 500)
|
||||
// ['open', 'close', 'lowest', 'highest', 'volumn']
|
||||
// [1, 4, 3, 2]
|
||||
data[i] = [
|
||||
// eslint-disable-next-line no-extra-parens
|
||||
echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', (xValue += minute)),
|
||||
Number(boxVals[openIdx].toFixed(2)),
|
||||
Number(boxVals[3].toFixed(2)),
|
||||
Number(boxVals[0].toFixed(2)),
|
||||
Number(boxVals[closeIdx].toFixed(2)),
|
||||
Number(volumn.toFixed(0)),
|
||||
getSign(data, i, Number(boxVals[openIdx]), Number(boxVals[closeIdx]), 4) // sign
|
||||
]
|
||||
}
|
||||
return data
|
||||
}
|
||||
|
||||
const data = generateOHLC(dataCount)
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('LargeScaleCandlestick'))
|
||||
const option = {
|
||||
dataset: {
|
||||
source: data
|
||||
},
|
||||
title: {
|
||||
text: 'Data Amount: ' + echarts.format.addCommas(dataCount)
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataZoom: {
|
||||
yAxisIndex: false
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: 200
|
||||
},
|
||||
{
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
height: 80,
|
||||
bottom: 80
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
// inverse: true,
|
||||
axisLine: { onZero: false },
|
||||
splitLine: { show: false },
|
||||
min: 'dataMin',
|
||||
max: 'dataMax'
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
gridIndex: 1,
|
||||
boundaryGap: false,
|
||||
axisLine: { onZero: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
min: 'dataMin',
|
||||
max: 'dataMax'
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
scale: true,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
scale: true,
|
||||
gridIndex: 1,
|
||||
splitNumber: 2,
|
||||
axisLabel: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false }
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0, 1],
|
||||
start: 10,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
xAxisIndex: [0, 1],
|
||||
type: 'slider',
|
||||
bottom: 10,
|
||||
start: 10,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
visualMap: {
|
||||
show: false,
|
||||
seriesIndex: 1,
|
||||
dimension: 6,
|
||||
pieces: [
|
||||
{
|
||||
value: 1,
|
||||
color: upColor
|
||||
},
|
||||
{
|
||||
value: -1,
|
||||
color: downColor
|
||||
}
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'candlestick',
|
||||
itemStyle: {
|
||||
color: upColor,
|
||||
color0: downColor,
|
||||
borderColor: upBorderColor,
|
||||
borderColor0: downBorderColor
|
||||
},
|
||||
encode: {
|
||||
x: 0,
|
||||
y: [1, 4, 3, 2]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Volumn',
|
||||
type: 'bar',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: '#7fbe9e'
|
||||
},
|
||||
large: true,
|
||||
encode: {
|
||||
x: 0,
|
||||
y: 5
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,324 +0,0 @@
|
||||
<template>
|
||||
<div id="ShangHaiIndex"></div>
|
||||
</template>
|
||||
<!--ec官网：https://echarts.apache.org/zh/index.html-->
|
||||
<script setup name="ShangHaiIndex">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
// 上证指数的一些参数
|
||||
const upColor = '#ec0000'
|
||||
const upBorderColor = '#8A0000'
|
||||
const downColor = '#00da3c'
|
||||
const downBorderColor = '#008F28'
|
||||
// 上证指数数据方法
|
||||
const splitData = (rawData) => {
|
||||
const categoryData = []
|
||||
const values = []
|
||||
for (let i = 0; i < rawData.length; i++) {
|
||||
categoryData.push(rawData[i].splice(0, 1)[0])
|
||||
values.push(rawData[i])
|
||||
}
|
||||
return {
|
||||
categoryData: categoryData,
|
||||
values: values
|
||||
}
|
||||
}
|
||||
// 上证指数的一些数据
|
||||
const data0 = splitData([
|
||||
['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
|
||||
['2013/1/25', 2300, 2291.3, 2288.26, 2308.38],
|
||||
['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92],
|
||||
['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8],
|
||||
['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76],
|
||||
['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82],
|
||||
['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15],
|
||||
['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38],
|
||||
['2013/2/5', 2411, 2433.13, 2403.3, 2437.42],
|
||||
['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73],
|
||||
['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89],
|
||||
['2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03],
|
||||
['2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8],
|
||||
['2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07],
|
||||
['2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94],
|
||||
['2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82],
|
||||
['2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88],
|
||||
['2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78],
|
||||
['2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71],
|
||||
['2013/2/27', 2297.77, 2313.22, 2292.03, 2324.63],
|
||||
['2013/2/28', 2322.32, 2365.59, 2308.92, 2366.16],
|
||||
['2013/3/1', 2364.54, 2359.51, 2330.86, 2369.65],
|
||||
['2013/3/4', 2332.08, 2273.4, 2259.25, 2333.54],
|
||||
['2013/3/5', 2274.81, 2326.31, 2270.1, 2328.14],
|
||||
['2013/3/6', 2333.61, 2347.18, 2321.6, 2351.44],
|
||||
['2013/3/7', 2340.44, 2324.29, 2304.27, 2352.02],
|
||||
['2013/3/8', 2326.42, 2318.61, 2314.59, 2333.67],
|
||||
['2013/3/11', 2314.68, 2310.59, 2296.58, 2320.96],
|
||||
['2013/3/12', 2309.16, 2286.6, 2264.83, 2333.29],
|
||||
['2013/3/13', 2282.17, 2263.97, 2253.25, 2286.33],
|
||||
['2013/3/14', 2255.77, 2270.28, 2253.31, 2276.22],
|
||||
['2013/3/15', 2269.31, 2278.4, 2250, 2312.08],
|
||||
['2013/3/18', 2267.29, 2240.02, 2239.21, 2276.05],
|
||||
['2013/3/19', 2244.26, 2257.43, 2232.02, 2261.31],
|
||||
['2013/3/20', 2257.74, 2317.37, 2257.42, 2317.86],
|
||||
['2013/3/21', 2318.21, 2324.24, 2311.6, 2330.81],
|
||||
['2013/3/22', 2321.4, 2328.28, 2314.97, 2332],
|
||||
['2013/3/25', 2334.74, 2326.72, 2319.91, 2344.89],
|
||||
['2013/3/26', 2318.58, 2297.67, 2281.12, 2319.99],
|
||||
['2013/3/27', 2299.38, 2301.26, 2289, 2323.48],
|
||||
['2013/3/28', 2273.55, 2236.3, 2232.91, 2273.55],
|
||||
['2013/3/29', 2238.49, 2236.62, 2228.81, 2246.87],
|
||||
['2013/4/1', 2229.46, 2234.4, 2227.31, 2243.95],
|
||||
['2013/4/2', 2234.9, 2227.74, 2220.44, 2253.42],
|
||||
['2013/4/3', 2232.69, 2225.29, 2217.25, 2241.34],
|
||||
['2013/4/8', 2196.24, 2211.59, 2180.67, 2212.59],
|
||||
['2013/4/9', 2215.47, 2225.77, 2215.47, 2234.73],
|
||||
['2013/4/10', 2224.93, 2226.13, 2212.56, 2233.04],
|
||||
['2013/4/11', 2236.98, 2219.55, 2217.26, 2242.48],
|
||||
['2013/4/12', 2218.09, 2206.78, 2204.44, 2226.26],
|
||||
['2013/4/15', 2199.91, 2181.94, 2177.39, 2204.99],
|
||||
['2013/4/16', 2169.63, 2194.85, 2165.78, 2196.43],
|
||||
['2013/4/17', 2195.03, 2193.8, 2178.47, 2197.51],
|
||||
['2013/4/18', 2181.82, 2197.6, 2175.44, 2206.03],
|
||||
['2013/4/19', 2201.12, 2244.64, 2200.58, 2250.11],
|
||||
['2013/4/22', 2236.4, 2242.17, 2232.26, 2245.12],
|
||||
['2013/4/23', 2242.62, 2184.54, 2182.81, 2242.62],
|
||||
['2013/4/24', 2187.35, 2218.32, 2184.11, 2226.12],
|
||||
['2013/4/25', 2213.19, 2199.31, 2191.85, 2224.63],
|
||||
['2013/4/26', 2203.89, 2177.91, 2173.86, 2210.58],
|
||||
['2013/5/2', 2170.78, 2174.12, 2161.14, 2179.65],
|
||||
['2013/5/3', 2179.05, 2205.5, 2179.05, 2222.81],
|
||||
['2013/5/6', 2212.5, 2231.17, 2212.5, 2236.07],
|
||||
['2013/5/7', 2227.86, 2235.57, 2219.44, 2240.26],
|
||||
['2013/5/8', 2242.39, 2246.3, 2235.42, 2255.21],
|
||||
['2013/5/9', 2246.96, 2232.97, 2221.38, 2247.86],
|
||||
['2013/5/10', 2228.82, 2246.83, 2225.81, 2247.67],
|
||||
['2013/5/13', 2247.68, 2241.92, 2231.36, 2250.85],
|
||||
['2013/5/14', 2238.9, 2217.01, 2205.87, 2239.93],
|
||||
['2013/5/15', 2217.09, 2224.8, 2213.58, 2225.19],
|
||||
['2013/5/16', 2221.34, 2251.81, 2210.77, 2252.87],
|
||||
['2013/5/17', 2249.81, 2282.87, 2248.41, 2288.09],
|
||||
['2013/5/20', 2286.33, 2299.99, 2281.9, 2309.39],
|
||||
['2013/5/21', 2297.11, 2305.11, 2290.12, 2305.3],
|
||||
['2013/5/22', 2303.75, 2302.4, 2292.43, 2314.18],
|
||||
['2013/5/23', 2293.81, 2275.67, 2274.1, 2304.95],
|
||||
['2013/5/24', 2281.45, 2288.53, 2270.25, 2292.59],
|
||||
['2013/5/27', 2286.66, 2293.08, 2283.94, 2301.7],
|
||||
['2013/5/28', 2293.4, 2321.32, 2281.47, 2322.1],
|
||||
['2013/5/29', 2323.54, 2324.02, 2321.17, 2334.33],
|
||||
['2013/5/30', 2316.25, 2317.75, 2310.49, 2325.72],
|
||||
['2013/5/31', 2320.74, 2300.59, 2299.37, 2325.53],
|
||||
['2013/6/3', 2300.21, 2299.25, 2294.11, 2313.43],
|
||||
['2013/6/4', 2297.1, 2272.42, 2264.76, 2297.1],
|
||||
['2013/6/5', 2270.71, 2270.93, 2260.87, 2276.86],
|
||||
['2013/6/6', 2264.43, 2242.11, 2240.07, 2266.69],
|
||||
['2013/6/7', 2242.26, 2210.9, 2205.07, 2250.63],
|
||||
['2013/6/13', 2190.1, 2148.35, 2126.22, 2190.1]
|
||||
])
|
||||
// 上证指数数据方法
|
||||
const calculateMA = (dayCount) => {
|
||||
let result = []
|
||||
for (let i = 0, len = data0.values.length; i < len; i++) {
|
||||
if (i < dayCount) {
|
||||
result.push('-')
|
||||
continue
|
||||
}
|
||||
let sum = 0
|
||||
for (let j = 0; j < dayCount; j++) {
|
||||
sum += Number(data0.values[i - j][1])
|
||||
}
|
||||
result.push(sum / dayCount)
|
||||
}
|
||||
return result
|
||||
}
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('ShangHaiIndex'))
|
||||
const option = {
|
||||
title: {
|
||||
text: '',
|
||||
left: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '15%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data0.categoryData,
|
||||
boundaryGap: false,
|
||||
axisLine: { onZero: false },
|
||||
splitLine: { show: false },
|
||||
min: 'dataMin',
|
||||
max: 'dataMax'
|
||||
},
|
||||
yAxis: {
|
||||
scale: true,
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 50,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
type: 'slider',
|
||||
top: '90%',
|
||||
start: 50,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '日K',
|
||||
type: 'candlestick',
|
||||
data: data0.values,
|
||||
itemStyle: {
|
||||
color: upColor,
|
||||
color0: downColor,
|
||||
borderColor: upBorderColor,
|
||||
borderColor0: downBorderColor
|
||||
},
|
||||
markPoint: {
|
||||
label: {
|
||||
formatter: function (param) {
|
||||
return param != null ? String(Math.round(param.value)) : ''
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: 'Mark',
|
||||
coord: ['2013/5/31', 2300],
|
||||
value: 2300,
|
||||
itemStyle: {
|
||||
color: 'rgb(41,60,85)'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'highest value',
|
||||
type: 'max',
|
||||
valueDim: 'highest'
|
||||
},
|
||||
{
|
||||
name: 'lowest value',
|
||||
type: 'min',
|
||||
valueDim: 'lowest'
|
||||
},
|
||||
{
|
||||
name: 'average value on close',
|
||||
type: 'average',
|
||||
valueDim: 'close'
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
formatter: function (param) {
|
||||
return param.name + '<br>' + (param.data.coord || '')
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
symbol: ['none', 'none'],
|
||||
data: [
|
||||
[
|
||||
{
|
||||
name: 'from lowest to highest',
|
||||
type: 'min',
|
||||
valueDim: 'lowest',
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'max',
|
||||
valueDim: 'highest',
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
{
|
||||
name: 'min line on close',
|
||||
type: 'min',
|
||||
valueDim: 'close'
|
||||
},
|
||||
{
|
||||
name: 'max line on close',
|
||||
type: 'max',
|
||||
valueDim: 'close'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'MA5',
|
||||
type: 'line',
|
||||
data: calculateMA(5),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
opacity: 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'MA10',
|
||||
type: 'line',
|
||||
data: calculateMA(10),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
opacity: 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'MA20',
|
||||
type: 'line',
|
||||
data: calculateMA(20),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
opacity: 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'MA30',
|
||||
type: 'line',
|
||||
data: calculateMA(30),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<div id="CustomizedFunnel"></div>
|
||||
</template>
|
||||
<script setup name="CustomizedFunnel">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Expected',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
width: '80%',
|
||||
label: {
|
||||
formatter: '{b}Expected'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.7
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
position: 'inside',
|
||||
formatter: '{b}Expected: {c}%'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: 'Visit' },
|
||||
{ value: 40, name: 'Inquiry' },
|
||||
{ value: 20, name: 'Order' },
|
||||
{ value: 80, name: 'Click' },
|
||||
{ value: 100, name: 'Show' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Actual',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
width: '80%',
|
||||
maxSize: '80%',
|
||||
label: {
|
||||
position: 'inside',
|
||||
formatter: '{c}%',
|
||||
color: '#fff'
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.5,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
position: 'inside',
|
||||
formatter: '{b}Actual: {c}%'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 30, name: 'Visit' },
|
||||
{ value: 10, name: 'Inquiry' },
|
||||
{ value: 5, name: 'Order' },
|
||||
{ value: 50, name: 'Click' },
|
||||
{ value: 80, name: 'Show' }
|
||||
],
|
||||
// Ensure outer shape will not be over inner shape when hover.
|
||||
z: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('CustomizedFunnel'))
|
||||
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<div id="FunnelChart"></div>
|
||||
</template>
|
||||
<script setup name="FunnelChart">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
top: 60,
|
||||
bottom: 60,
|
||||
width: '80%',
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%',
|
||||
sort: 'descending',
|
||||
gap: 2,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: 'Visit' },
|
||||
{ value: 40, name: 'Inquiry' },
|
||||
{ value: 20, name: 'Order' },
|
||||
{ value: 80, name: 'Click' },
|
||||
{ value: 100, name: 'Show' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('FunnelChart'))
|
||||
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,114 +0,0 @@
|
||||
<template>
|
||||
<div id="FunnelCompare"></div>
|
||||
</template>
|
||||
<script setup name="FunnelCompare">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
left: 'left',
|
||||
top: 'bottom'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
top: 'center',
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['Prod A', 'Prod B', 'Prod C', 'Prod D', 'Prod E']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
width: '40%',
|
||||
height: '45%',
|
||||
left: '5%',
|
||||
top: '50%',
|
||||
funnelAlign: 'right',
|
||||
data: [
|
||||
{ value: 60, name: 'Prod C' },
|
||||
{ value: 30, name: 'Prod D' },
|
||||
{ value: 10, name: 'Prod E' },
|
||||
{ value: 80, name: 'Prod B' },
|
||||
{ value: 100, name: 'Prod A' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Pyramid',
|
||||
type: 'funnel',
|
||||
width: '40%',
|
||||
height: '45%',
|
||||
left: '5%',
|
||||
top: '5%',
|
||||
sort: 'ascending',
|
||||
funnelAlign: 'right',
|
||||
data: [
|
||||
{ value: 60, name: 'Prod C' },
|
||||
{ value: 30, name: 'Prod D' },
|
||||
{ value: 10, name: 'Prod E' },
|
||||
{ value: 80, name: 'Prod B' },
|
||||
{ value: 100, name: 'Prod A' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
width: '40%',
|
||||
height: '45%',
|
||||
left: '55%',
|
||||
top: '5%',
|
||||
funnelAlign: 'left',
|
||||
data: [
|
||||
{ value: 60, name: 'Prod C' },
|
||||
{ value: 30, name: 'Prod D' },
|
||||
{ value: 10, name: 'Prod E' },
|
||||
{ value: 80, name: 'Prod B' },
|
||||
{ value: 100, name: 'Prod A' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Pyramid',
|
||||
type: 'funnel',
|
||||
width: '40%',
|
||||
height: '45%',
|
||||
left: '55%',
|
||||
top: '50%',
|
||||
sort: 'ascending',
|
||||
funnelAlign: 'left',
|
||||
data: [
|
||||
{ value: 60, name: 'Prod C' },
|
||||
{ value: 30, name: 'Prod D' },
|
||||
{ value: 10, name: 'Prod E' },
|
||||
{ value: 80, name: 'Prod B' },
|
||||
{ value: 100, name: 'Prod A' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('FunnelCompare'))
|
||||
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,114 +0,0 @@
|
||||
<template>
|
||||
<div id="MultipleFunnels"></div>
|
||||
</template>
|
||||
<script setup name="MultipleFunnels">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '',
|
||||
left: 'left',
|
||||
top: 'bottom'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
orient: 'vertical',
|
||||
top: 'center',
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
width: '40%',
|
||||
height: '45%',
|
||||
left: '5%',
|
||||
top: '50%',
|
||||
data: [
|
||||
{ value: 60, name: 'Visit' },
|
||||
{ value: 30, name: 'Inquiry' },
|
||||
{ value: 10, name: 'Order' },
|
||||
{ value: 80, name: 'Click' },
|
||||
{ value: 100, name: 'Show' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Pyramid',
|
||||
type: 'funnel',
|
||||
width: '40%',
|
||||
height: '45%',
|
||||
left: '5%',
|
||||
top: '5%',
|
||||
sort: 'ascending',
|
||||
data: [
|
||||
{ value: 60, name: 'Visit' },
|
||||
{ value: 30, name: 'Inquiry' },
|
||||
{ value: 10, name: 'Order' },
|
||||
{ value: 80, name: 'Click' },
|
||||
{ value: 100, name: 'Show' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
width: '40%',
|
||||
height: '45%',
|
||||
left: '55%',
|
||||
top: '5%',
|
||||
label: {
|
||||
position: 'left'
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: 'Visit' },
|
||||
{ value: 30, name: 'Inquiry' },
|
||||
{ value: 10, name: 'Order' },
|
||||
{ value: 80, name: 'Click' },
|
||||
{ value: 100, name: 'Show' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Pyramid',
|
||||
type: 'funnel',
|
||||
width: '40%',
|
||||
height: '45%',
|
||||
left: '55%',
|
||||
top: '50%',
|
||||
sort: 'ascending',
|
||||
label: {
|
||||
position: 'left'
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: 'Visit' },
|
||||
{ value: 30, name: 'Inquiry' },
|
||||
{ value: 10, name: 'Order' },
|
||||
{ value: 80, name: 'Click' },
|
||||
{ value: 100, name: 'Show' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('MultipleFunnels'))
|
||||
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<div id="BasicScatterChart"></div>
|
||||
</template>
|
||||
<script setup name="BasicScatterChart">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('BasicScatterChart'))
|
||||
const option = {
|
||||
xAxis: {},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
symbolSize: 20,
|
||||
data: [
|
||||
[10.0, 8.04],
|
||||
[8.07, 6.95],
|
||||
[13.0, 7.58],
|
||||
[9.05, 8.81],
|
||||
[11.0, 8.33],
|
||||
[14.0, 7.66],
|
||||
[13.4, 6.81],
|
||||
[10.0, 6.33],
|
||||
[14.0, 8.96],
|
||||
[12.5, 6.82],
|
||||
[9.15, 7.2],
|
||||
[11.5, 7.2],
|
||||
[3.03, 4.23],
|
||||
[12.2, 7.83],
|
||||
[2.02, 4.47],
|
||||
[1.05, 3.33],
|
||||
[4.05, 4.96],
|
||||
[6.03, 7.24],
|
||||
[12.0, 6.26],
|
||||
[12.0, 8.84],
|
||||
[7.08, 5.82],
|
||||
[5.02, 5.68]
|
||||
],
|
||||
type: 'scatter'
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,139 +0,0 @@
|
||||
<template>
|
||||
<div id="ClusteringProcess"></div>
|
||||
</template>
|
||||
<script setup name="ClusteringProcess">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import ecStat from 'echarts-stat'
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('ClusteringProcess'))
|
||||
|
||||
echarts.registerTransform(ecStat.transform.clustering)
|
||||
const data = [
|
||||
[3.275154, 2.957587],
|
||||
[-3.344465, 2.603513],
|
||||
[0.355083, -3.376585],
|
||||
[1.852435, 3.547351],
|
||||
[-2.078973, 2.552013],
|
||||
[-0.993756, -0.884433],
|
||||
[2.682252, 4.007573],
|
||||
[-3.087776, 2.878713],
|
||||
[-1.565978, -1.256985],
|
||||
[2.441611, 0.444826],
|
||||
[-0.659487, 3.111284],
|
||||
[-0.459601, -2.618005],
|
||||
[2.17768, 2.387793],
|
||||
[-2.920969, 2.917485],
|
||||
[-0.028814, -4.168078],
|
||||
[3.625746, 2.119041],
|
||||
[-3.912363, 1.325108],
|
||||
[-0.551694, -2.814223],
|
||||
[2.855808, 3.483301],
|
||||
[-3.594448, 2.856651],
|
||||
[0.421993, -2.372646],
|
||||
[1.650821, 3.407572],
|
||||
[-2.082902, 3.384412],
|
||||
[-0.718809, -2.492514],
|
||||
[4.513623, 3.841029],
|
||||
[-4.822011, 4.607049],
|
||||
[-0.656297, -1.449872],
|
||||
[1.919901, 4.439368],
|
||||
[-3.287749, 3.918836],
|
||||
[-1.576936, -2.977622],
|
||||
[3.598143, 1.97597],
|
||||
[-3.977329, 4.900932],
|
||||
[-1.79108, -2.184517],
|
||||
[3.914654, 3.559303],
|
||||
[-1.910108, 4.166946],
|
||||
[-1.226597, -3.317889],
|
||||
[1.148946, 3.345138],
|
||||
[-2.113864, 3.548172],
|
||||
[0.845762, -3.589788],
|
||||
[2.629062, 3.535831],
|
||||
[-1.640717, 2.990517],
|
||||
[-1.881012, -2.485405],
|
||||
[4.606999, 3.510312],
|
||||
[-4.366462, 4.023316],
|
||||
[0.765015, -3.00127],
|
||||
[3.121904, 2.173988],
|
||||
[-4.025139, 4.65231],
|
||||
[-0.559558, -3.840539],
|
||||
[4.376754, 4.863579],
|
||||
[-1.874308, 4.032237],
|
||||
[-0.089337, -3.026809],
|
||||
[3.997787, 2.518662],
|
||||
[-3.082978, 2.884822],
|
||||
[0.845235, -3.454465],
|
||||
[1.327224, 3.358778],
|
||||
[-2.889949, 3.596178],
|
||||
[-0.966018, -2.839827],
|
||||
[2.960769, 3.079555],
|
||||
[-3.275518, 1.577068],
|
||||
[0.639276, -3.41284]
|
||||
]
|
||||
let CLUSTER_COUNT = 6
|
||||
let DIENSIION_CLUSTER_INDEX = 2
|
||||
let COLOR_ALL = ['#37A2DA', '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF']
|
||||
let pieces = []
|
||||
for (var i = 0; i < CLUSTER_COUNT; i++) {
|
||||
pieces.push({
|
||||
value: i,
|
||||
label: 'cluster ' + i,
|
||||
color: COLOR_ALL[i]
|
||||
})
|
||||
}
|
||||
|
||||
const option = {
|
||||
dataset: [
|
||||
{
|
||||
source: data
|
||||
},
|
||||
{
|
||||
transform: {
|
||||
type: 'ecStat:clustering',
|
||||
// print: true,
|
||||
config: {
|
||||
clusterCount: CLUSTER_COUNT,
|
||||
outputType: 'single',
|
||||
outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
position: 'top'
|
||||
},
|
||||
visualMap: {
|
||||
type: 'piecewise',
|
||||
top: 'middle',
|
||||
min: 0,
|
||||
max: CLUSTER_COUNT,
|
||||
left: 10,
|
||||
splitNumber: CLUSTER_COUNT,
|
||||
dimension: DIENSIION_CLUSTER_INDEX,
|
||||
pieces: pieces
|
||||
},
|
||||
grid: {
|
||||
left: 120
|
||||
},
|
||||
xAxis: {},
|
||||
yAxis: {},
|
||||
series: {
|
||||
type: 'scatter',
|
||||
encode: { tooltip: [0, 1] },
|
||||
symbolSize: 15,
|
||||
itemStyle: {
|
||||
borderColor: '#555'
|
||||
},
|
||||
datasetIndex: 1
|
||||
}
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<div id="EffectScatterChart"></div>
|
||||
</template>
|
||||
<script setup name="EffectScatterChart">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('EffectScatterChart'))
|
||||
const option = {
|
||||
xAxis: {
|
||||
scale: true
|
||||
},
|
||||
yAxis: {
|
||||
scale: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'effectScatter',
|
||||
symbolSize: 20,
|
||||
data: [
|
||||
[172.7, 105.2],
|
||||
[153.4, 42]
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'scatter',
|
||||
// prettier-ignore
|
||||
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
|
||||
[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
|
||||
[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
|
||||
[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
|
||||
[159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
|
||||
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
|
||||
[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
|
||||
[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
|
||||
[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
|
||||
[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
|
||||
[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
|
||||
[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
|
||||
[156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
|
||||
[162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
|
||||
[151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
|
||||
[164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
|
||||
[170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
|
||||
[163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
|
||||
[161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
|
||||
[159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
|
||||
[161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
|
||||
[171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
|
||||
[166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
|
||||
[159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
|
||||
[162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
|
||||
[172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
|
||||
[162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
|
||||
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
|
||||
[167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
|
||||
[170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
|
||||
[160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
|
||||
[166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
|
||||
[170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
|
||||
[167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
|
||||
[160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
|
||||
[177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
|
||||
[172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
|
||||
[175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
|
||||
[165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
|
||||
[168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
|
||||
[162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
|
||||
[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
|
||||
[172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
|
||||
[161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
|
||||
[152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
|
||||
[160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
|
||||
[167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
|
||||
[175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
|
||||
[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
|
||||
[156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
|
||||
[169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
|
||||
[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,264 +0,0 @@
|
||||
<template>
|
||||
<div id="ScatterAqiColor"></div>
|
||||
</template>
|
||||
<script setup name="ScatterAqiColor">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const dataBJ = [
|
||||
[1, 55, 9, 56, 0.46, 18, 6, '良'],
|
||||
[2, 25, 11, 21, 0.65, 34, 9, '优'],
|
||||
[3, 56, 7, 63, 0.3, 14, 5, '良'],
|
||||
[4, 33, 7, 29, 0.33, 16, 6, '优'],
|
||||
[5, 42, 24, 44, 0.76, 40, 16, '优'],
|
||||
[6, 82, 58, 90, 1.77, 68, 33, '良'],
|
||||
[7, 74, 49, 77, 1.46, 48, 27, '良'],
|
||||
[8, 78, 55, 80, 1.29, 59, 29, '良'],
|
||||
[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
|
||||
[10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
|
||||
[11, 39, 19, 38, 0.57, 31, 15, '优'],
|
||||
[12, 41, 11, 40, 0.43, 21, 7, '优'],
|
||||
[13, 64, 38, 74, 1.04, 46, 22, '良'],
|
||||
[14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
|
||||
[15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
|
||||
[16, 33, 6, 29, 0.34, 13, 5, '优'],
|
||||
[17, 94, 66, 110, 1.54, 62, 31, '良'],
|
||||
[18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
|
||||
[19, 57, 31, 54, 0.96, 32, 14, '良'],
|
||||
[20, 22, 8, 17, 0.48, 23, 10, '优'],
|
||||
[21, 39, 15, 36, 0.61, 29, 13, '优'],
|
||||
[22, 94, 69, 114, 2.08, 73, 39, '良'],
|
||||
[23, 99, 73, 110, 2.43, 76, 48, '良'],
|
||||
[24, 31, 12, 30, 0.5, 32, 16, '优'],
|
||||
[25, 42, 27, 43, 1, 53, 22, '优'],
|
||||
[26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
|
||||
[27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
|
||||
[28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
|
||||
[29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
|
||||
[30, 52, 24, 60, 1.03, 50, 21, '良'],
|
||||
[31, 46, 5, 49, 0.28, 10, 6, '优']
|
||||
]
|
||||
const dataGZ = [
|
||||
[1, 26, 37, 27, 1.163, 27, 13, '优'],
|
||||
[2, 85, 62, 71, 1.195, 60, 8, '良'],
|
||||
[3, 78, 38, 74, 1.363, 37, 7, '良'],
|
||||
[4, 21, 21, 36, 0.634, 40, 9, '优'],
|
||||
[5, 41, 42, 46, 0.915, 81, 13, '优'],
|
||||
[6, 56, 52, 69, 1.067, 92, 16, '良'],
|
||||
[7, 64, 30, 28, 0.924, 51, 2, '良'],
|
||||
[8, 55, 48, 74, 1.236, 75, 26, '良'],
|
||||
[9, 76, 85, 113, 1.237, 114, 27, '良'],
|
||||
[10, 91, 81, 104, 1.041, 56, 40, '良'],
|
||||
[11, 84, 39, 60, 0.964, 25, 11, '良'],
|
||||
[12, 64, 51, 101, 0.862, 58, 23, '良'],
|
||||
[13, 70, 69, 120, 1.198, 65, 36, '良'],
|
||||
[14, 77, 105, 178, 2.549, 64, 16, '良'],
|
||||
[15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
|
||||
[16, 73, 68, 97, 0.905, 51, 34, '良'],
|
||||
[17, 54, 27, 47, 0.592, 53, 12, '良'],
|
||||
[18, 51, 61, 97, 0.811, 65, 19, '良'],
|
||||
[19, 91, 71, 121, 1.374, 43, 18, '良'],
|
||||
[20, 73, 102, 182, 2.787, 44, 19, '良'],
|
||||
[21, 73, 50, 76, 0.717, 31, 20, '良'],
|
||||
[22, 84, 94, 140, 2.238, 68, 18, '良'],
|
||||
[23, 93, 77, 104, 1.165, 53, 7, '良'],
|
||||
[24, 99, 130, 227, 3.97, 55, 15, '良'],
|
||||
[25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
|
||||
[26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
|
||||
[27, 81, 48, 62, 1.619, 26, 3, '良'],
|
||||
[28, 56, 48, 68, 1.336, 37, 9, '良'],
|
||||
[29, 82, 92, 174, 3.29, 0, 13, '良'],
|
||||
[30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
|
||||
[31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
|
||||
]
|
||||
const dataSH = [
|
||||
[1, 91, 45, 125, 0.82, 34, 23, '良'],
|
||||
[2, 65, 27, 78, 0.86, 45, 29, '良'],
|
||||
[3, 83, 60, 84, 1.09, 73, 27, '良'],
|
||||
[4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
|
||||
[5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
|
||||
[6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
|
||||
[7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
|
||||
[8, 89, 65, 78, 0.86, 51, 26, '良'],
|
||||
[9, 53, 33, 47, 0.64, 50, 17, '良'],
|
||||
[10, 80, 55, 80, 1.01, 75, 24, '良'],
|
||||
[11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
|
||||
[12, 99, 71, 142, 1.1, 62, 42, '良'],
|
||||
[13, 95, 69, 130, 1.28, 74, 50, '良'],
|
||||
[14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
|
||||
[15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
|
||||
[16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
|
||||
[17, 79, 43, 107, 1.05, 59, 37, '良'],
|
||||
[18, 71, 46, 89, 0.86, 64, 25, '良'],
|
||||
[19, 97, 71, 113, 1.17, 88, 31, '良'],
|
||||
[20, 84, 57, 91, 0.85, 55, 31, '良'],
|
||||
[21, 87, 63, 101, 0.9, 56, 41, '良'],
|
||||
[22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
|
||||
[23, 87, 62, 100, 1, 72, 28, '良'],
|
||||
[24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
|
||||
[25, 65, 45, 51, 0.74, 39, 17, '良'],
|
||||
[26, 39, 24, 38, 0.61, 47, 17, '优'],
|
||||
[27, 39, 24, 39, 0.59, 50, 19, '优'],
|
||||
[28, 93, 68, 96, 1.05, 79, 29, '良'],
|
||||
[29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
|
||||
[30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
|
||||
[31, 187, 143, 201, 1.39, 89, 53, '中度污染']
|
||||
]
|
||||
const schema = [
|
||||
{ name: 'date', index: 0, text: '日' },
|
||||
{ name: 'AQIindex', index: 1, text: 'AQI指数' },
|
||||
{ name: 'PM25', index: 2, text: 'PM2.5' },
|
||||
{ name: 'PM10', index: 3, text: 'PM10' },
|
||||
{ name: 'CO', index: 4, text: '一氧化碳（CO）' },
|
||||
{ name: 'NO2', index: 5, text: '二氧化氮（NO2）' },
|
||||
{ name: 'SO2', index: 6, text: '二氧化硫（SO2）' }
|
||||
]
|
||||
const itemStyle = {
|
||||
opacity: 0.8,
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowColor: 'rgba(0,0,0,0.3)'
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('ScatterAqiColor'))
|
||||
const option = {
|
||||
color: ['#dd4444', '#fec42c', '#80F1BE'],
|
||||
legend: {
|
||||
top: 10,
|
||||
data: ['北京', '上海', '广州'],
|
||||
textStyle: {
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: 150,
|
||||
top: '18%',
|
||||
bottom: '10%'
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(255,255,255,0.7)',
|
||||
formatter: function (param) {
|
||||
var value = param.value
|
||||
// prettier-ignore
|
||||
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
|
||||
+ param.seriesName + ' ' + value[0] + '日：'
|
||||
+ value[7]
|
||||
+ '</div>'
|
||||
+ schema[1].text + '：' + value[1] + '<br>'
|
||||
+ schema[2].text + '：' + value[2] + '<br>'
|
||||
+ schema[3].text + '：' + value[3] + '<br>'
|
||||
+ schema[4].text + '：' + value[4] + '<br>'
|
||||
+ schema[5].text + '：' + value[5] + '<br>'
|
||||
+ schema[6].text + '：' + value[6] + '<br>';
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: '日期',
|
||||
nameGap: 16,
|
||||
nameTextStyle: {
|
||||
fontSize: 16
|
||||
},
|
||||
max: 31,
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: 'AQI指数',
|
||||
nameLocation: 'end',
|
||||
nameGap: 20,
|
||||
nameTextStyle: {
|
||||
fontSize: 16
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
visualMap: [
|
||||
{
|
||||
left: 'right',
|
||||
top: '10%',
|
||||
dimension: 2,
|
||||
min: 0,
|
||||
max: 250,
|
||||
itemWidth: 30,
|
||||
itemHeight: 120,
|
||||
calculable: true,
|
||||
precision: 0.1,
|
||||
text: ['圆形大小：PM2.5'],
|
||||
textGap: 30,
|
||||
inRange: {
|
||||
symbolSize: [10, 70]
|
||||
},
|
||||
outOfRange: {
|
||||
symbolSize: [10, 70],
|
||||
color: ['rgba(255,255,255,0.4)']
|
||||
},
|
||||
controller: {
|
||||
inRange: {
|
||||
color: ['#c23531']
|
||||
},
|
||||
outOfRange: {
|
||||
color: ['#999']
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
left: 'right',
|
||||
bottom: '5%',
|
||||
dimension: 6,
|
||||
min: 0,
|
||||
max: 50,
|
||||
itemHeight: 120,
|
||||
text: ['明暗：二氧化硫'],
|
||||
textGap: 30,
|
||||
inRange: {
|
||||
colorLightness: [0.9, 0.5]
|
||||
},
|
||||
outOfRange: {
|
||||
color: ['rgba(255,255,255,0.4)']
|
||||
},
|
||||
controller: {
|
||||
inRange: {
|
||||
color: ['#c23531']
|
||||
},
|
||||
outOfRange: {
|
||||
color: ['#999']
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '北京',
|
||||
type: 'scatter',
|
||||
itemStyle: itemStyle,
|
||||
data: dataBJ
|
||||
},
|
||||
{
|
||||
name: '上海',
|
||||
type: 'scatter',
|
||||
itemStyle: itemStyle,
|
||||
data: dataSH
|
||||
},
|
||||
{
|
||||
name: '广州',
|
||||
type: 'scatter',
|
||||
itemStyle: itemStyle,
|
||||
data: dataGZ
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,182 +0,0 @@
|
||||
<template>
|
||||
<div id="TreeWithPolylineEdge"></div>
|
||||
</template>
|
||||
<script setup name="TreeWithPolylineEdge">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const data = {
|
||||
name: 'flare',
|
||||
children: [
|
||||
{
|
||||
name: 'data',
|
||||
children: [
|
||||
{
|
||||
name: 'converters',
|
||||
children: [
|
||||
{ name: 'Converters', value: 721 },
|
||||
{ name: 'DelimitedTextConverter', value: 4294 }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'DataUtil',
|
||||
value: 3322
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'display',
|
||||
children: [
|
||||
{ name: 'DirtySprite', value: 8833 },
|
||||
{ name: 'LineSprite', value: 1732 },
|
||||
{ name: 'RectSprite', value: 3623 }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'flex',
|
||||
children: [{ name: 'FlareVis', value: 4116 }]
|
||||
},
|
||||
{
|
||||
name: 'query',
|
||||
children: [
|
||||
{ name: 'AggregateExpression', value: 1616 },
|
||||
{ name: 'And', value: 1027 },
|
||||
{ name: 'Arithmetic', value: 3891 },
|
||||
{ name: 'Average', value: 891 },
|
||||
{ name: 'BinaryExpression', value: 2893 },
|
||||
{ name: 'Comparison', value: 5103 },
|
||||
{ name: 'CompositeExpression', value: 3677 },
|
||||
{ name: 'Count', value: 781 },
|
||||
{ name: 'DateUtil', value: 4141 },
|
||||
{ name: 'Distinct', value: 933 },
|
||||
{ name: 'Expression', value: 5130 },
|
||||
{ name: 'ExpressionIterator', value: 3617 },
|
||||
{ name: 'Fn', value: 3240 },
|
||||
{ name: 'If', value: 2732 },
|
||||
{ name: 'IsA', value: 2039 },
|
||||
{ name: 'Literal', value: 1214 },
|
||||
{ name: 'Match', value: 3748 },
|
||||
{ name: 'Maximum', value: 843 },
|
||||
{
|
||||
name: 'methods',
|
||||
children: [
|
||||
{ name: 'add', value: 593 },
|
||||
{ name: 'and', value: 330 },
|
||||
{ name: 'average', value: 287 },
|
||||
{ name: 'count', value: 277 },
|
||||
{ name: 'distinct', value: 292 },
|
||||
{ name: 'div', value: 595 },
|
||||
{ name: 'eq', value: 594 },
|
||||
{ name: 'fn', value: 460 },
|
||||
{ name: 'gt', value: 603 },
|
||||
{ name: 'gte', value: 625 },
|
||||
{ name: 'iff', value: 748 },
|
||||
{ name: 'isa', value: 461 },
|
||||
{ name: 'lt', value: 597 },
|
||||
{ name: 'lte', value: 619 },
|
||||
{ name: 'max', value: 283 },
|
||||
{ name: 'min', value: 283 },
|
||||
{ name: 'mod', value: 591 },
|
||||
{ name: 'mul', value: 603 },
|
||||
{ name: 'neq', value: 599 },
|
||||
{ name: 'not', value: 386 },
|
||||
{ name: 'or', value: 323 },
|
||||
{ name: 'orderby', value: 307 },
|
||||
{ name: 'range', value: 772 },
|
||||
{ name: 'select', value: 296 },
|
||||
{ name: 'stddev', value: 363 },
|
||||
{ name: 'sub', value: 600 },
|
||||
{ name: 'sum', value: 280 },
|
||||
{ name: 'update', value: 307 },
|
||||
{ name: 'variance', value: 335 },
|
||||
{ name: 'where', value: 299 },
|
||||
{ name: 'xor', value: 354 },
|
||||
{ name: 'x_x', value: 264 }
|
||||
]
|
||||
},
|
||||
{ name: 'Minimum', value: 843 },
|
||||
{ name: 'Not', value: 1554 },
|
||||
{ name: 'Or', value: 970 },
|
||||
{ name: 'Query', value: 13896 },
|
||||
{ name: 'Range', value: 1594 },
|
||||
{ name: 'StringUtil', value: 4130 },
|
||||
{ name: 'Sum', value: 791 },
|
||||
{ name: 'Variable', value: 1124 },
|
||||
{ name: 'Variance', value: 1876 },
|
||||
{ name: 'Xor', value: 1101 }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'scale',
|
||||
children: [
|
||||
{ name: 'IScaleMap', value: 2105 },
|
||||
{ name: 'LinearScale', value: 1316 },
|
||||
{ name: 'LogScale', value: 3151 },
|
||||
{ name: 'OrdinalScale', value: 3770 },
|
||||
{ name: 'QuantileScale', value: 2435 },
|
||||
{ name: 'QuantitativeScale', value: 4839 },
|
||||
{ name: 'RootScale', value: 1756 },
|
||||
{ name: 'Scale', value: 4268 },
|
||||
{ name: 'ScaleType', value: 1821 },
|
||||
{ name: 'TimeScale', value: 5833 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
triggerOn: 'mousemove'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'tree',
|
||||
id: 0,
|
||||
name: 'tree1',
|
||||
data: [data],
|
||||
top: '10%',
|
||||
left: '8%',
|
||||
bottom: '22%',
|
||||
right: '20%',
|
||||
symbolSize: 7,
|
||||
edgeShape: 'polyline',
|
||||
edgeForkPosition: '63%',
|
||||
initialTreeDepth: 3,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
label: {
|
||||
backgroundColor: '#fff',
|
||||
position: 'left',
|
||||
verticalAlign: 'middle',
|
||||
align: 'right'
|
||||
},
|
||||
leaves: {
|
||||
label: {
|
||||
position: 'right',
|
||||
verticalAlign: 'middle',
|
||||
align: 'left'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'descendant'
|
||||
},
|
||||
expandAndCollapse: true,
|
||||
animationDuration: 550,
|
||||
animationDurationUpdate: 750
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('TreeWithPolylineEdge'))
|
||||
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<div id="BasicLineChart"></div>
|
||||
</template>
|
||||
<script setup name="BasicLineChart">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
type: 'line'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('BasicLineChart'))
|
||||
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<div id="StackedAreaChart"></div>
|
||||
</template>
|
||||
<script setup name="StackedAreaChart">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Email',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Union Ads',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'Video Ads',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: 'Search Engine',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('StackedAreaChart'))
|
||||
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<div id="StackedLineChart"></div>
|
||||
</template>
|
||||
<script setup name="StackedLineChart">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Email',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Union Ads',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'Video Ads',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: 'Search Engine',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('StackedLineChart'))
|
||||
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div id="StepLine"></div>
|
||||
</template>
|
||||
<script setup name="StepLine">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['Step Start', 'Step Middle', 'Step End']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Step Start',
|
||||
type: 'line',
|
||||
step: 'start',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Step Middle',
|
||||
type: 'line',
|
||||
step: 'middle',
|
||||
data: [220, 282, 201, 234, 290, 430, 410]
|
||||
},
|
||||
{
|
||||
name: 'Step End',
|
||||
type: 'line',
|
||||
step: 'end',
|
||||
data: [450, 432, 401, 454, 590, 530, 510]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('StepLine'))
|
||||
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div id="GaugeBasicChart"></div>
|
||||
</template>
|
||||
<script setup name="GaugeBasicChart">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('GaugeBasicChart'))
|
||||
const option = {
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Pressure',
|
||||
type: 'gauge',
|
||||
detail: {
|
||||
formatter: '{value}'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 50,
|
||||
name: 'SCORE'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,106 +0,0 @@
|
||||
<template>
|
||||
<div id="GrogressGauge"></div>
|
||||
</template>
|
||||
<script setup name="GrogressGauge">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('GrogressGauge'))
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 240,
|
||||
splitNumber: 12,
|
||||
itemStyle: {
|
||||
color: '#58D9F9',
|
||||
shadowColor: 'rgba(0,138,255,0.45)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
roundCap: true,
|
||||
width: 18
|
||||
},
|
||||
pointer: {
|
||||
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
|
||||
length: '75%',
|
||||
width: 16,
|
||||
offsetCenter: [0, '5%']
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: true,
|
||||
lineStyle: {
|
||||
width: 18
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
splitNumber: 2,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
length: 12,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
distance: 20,
|
||||
color: '#999',
|
||||
fontSize: 10
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
backgroundColor: '#fff',
|
||||
borderColor: '#999',
|
||||
borderWidth: 2,
|
||||
width: '60%',
|
||||
lineHeight: 40,
|
||||
height: 40,
|
||||
borderRadius: 8,
|
||||
offsetCenter: [0, '35%'],
|
||||
valueAnimation: true,
|
||||
formatter: function (value) {
|
||||
return '{value|' + value.toFixed(0) + '}{unit|km/h}'
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
fontSize: 30,
|
||||
fontWeight: 'bolder',
|
||||
color: '#777'
|
||||
},
|
||||
unit: {
|
||||
fontSize: 15,
|
||||
color: '#999',
|
||||
padding: [0, 0, -20, 10]
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,83 +0,0 @@
|
||||
<template>
|
||||
<div id="StageSpeedGauge"></div>
|
||||
</template>
|
||||
<script setup name="StageSpeedGauge">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('StageSpeedGauge'))
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 30,
|
||||
color: [
|
||||
[0.3, '#67e0e3'],
|
||||
[0.7, '#37a2da'],
|
||||
[1, '#fd666d']
|
||||
]
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
itemStyle: {
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
distance: -30,
|
||||
length: 8,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
distance: -30,
|
||||
length: 30,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
width: 4
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'auto',
|
||||
distance: 40,
|
||||
fontSize: 20
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
formatter: '{value} km/h',
|
||||
color: 'auto'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 70
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
setInterval(() => {
|
||||
Echarts.setOption({
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
value: Number((Math.random() * 100).toFixed(2))
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}, 2000)
|
||||
})
|
||||
</script>
|
||||
@ -1,147 +0,0 @@
|
||||
<template>
|
||||
<div id="TemperatureGaugeChart"></div>
|
||||
</template>
|
||||
<script setup name="TemperatureGaugeChart">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('TemperatureGaugeChart'))
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
center: ['50%', '60%'],
|
||||
startAngle: 200,
|
||||
endAngle: -20,
|
||||
min: 0,
|
||||
max: 60,
|
||||
splitNumber: 12,
|
||||
itemStyle: {
|
||||
color: '#FFAB91'
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 30
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 30
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
distance: -45,
|
||||
splitNumber: 5,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
distance: -52,
|
||||
length: 14,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
distance: -20,
|
||||
color: '#999',
|
||||
fontSize: 20
|
||||
},
|
||||
anchor: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
width: '60%',
|
||||
lineHeight: 40,
|
||||
borderRadius: 8,
|
||||
offsetCenter: [0, '-15%'],
|
||||
fontSize: 30,
|
||||
fontWeight: 'bolder',
|
||||
formatter: '{value} °C',
|
||||
color: 'auto'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 20
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'gauge',
|
||||
center: ['50%', '60%'],
|
||||
startAngle: 200,
|
||||
endAngle: -20,
|
||||
min: 0,
|
||||
max: 60,
|
||||
itemStyle: {
|
||||
color: '#FD7347'
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 8
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 20
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
setInterval(() => {
|
||||
const random = Number((Math.random() * 60).toFixed(2))
|
||||
Echarts.setOption({
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
value: random
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
value: random
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}, 2000)
|
||||
})
|
||||
</script>
|
||||
@ -1,77 +0,0 @@
|
||||
<template>
|
||||
<div id="BarChartWithNegativeValue"></div>
|
||||
</template>
|
||||
<script setup name="BarChartWithNegativeValue">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const labelRight = {
|
||||
position: 'right'
|
||||
}
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 80,
|
||||
bottom: 30
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
position: 'top',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Cost',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}'
|
||||
},
|
||||
data: [
|
||||
{ value: -0.07, label: labelRight },
|
||||
{ value: -0.09, label: labelRight },
|
||||
0.2,
|
||||
0.44,
|
||||
{ value: -0.23, label: labelRight },
|
||||
0.08,
|
||||
{ value: -0.17, label: labelRight },
|
||||
0.47,
|
||||
{ value: -0.36, label: labelRight },
|
||||
0.18
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('BarChartWithNegativeValue'))
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,132 +0,0 @@
|
||||
<template>
|
||||
<div id="BarLabelRotation"></div>
|
||||
</template>
|
||||
<script setup name="BarLabelRotation">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'bar',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: 'Email',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Union Ads',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'Video Ads',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: 'Search Engine',
|
||||
type: 'bar',
|
||||
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
markLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
},
|
||||
data: [[{ type: 'min' }, { type: 'max' }]]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Baidu',
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
stack: 'Search Engine',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [620, 732, 701, 734, 1090, 1130, 1120]
|
||||
},
|
||||
{
|
||||
name: 'Google',
|
||||
type: 'bar',
|
||||
stack: 'Search Engine',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 290, 230, 220]
|
||||
},
|
||||
{
|
||||
name: 'Bing',
|
||||
type: 'bar',
|
||||
stack: 'Search Engine',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [60, 72, 71, 74, 190, 130, 110]
|
||||
},
|
||||
{
|
||||
name: 'Others',
|
||||
type: 'bar',
|
||||
stack: 'Search Engine',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [62, 82, 91, 84, 109, 110, 120]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('BarLabelRotation'))
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div id="BasicBar"></div>
|
||||
</template>
|
||||
<script setup name="BasicBar">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('BasicBar'))
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
}
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,249 +0,0 @@
|
||||
<template>
|
||||
<div id="WatermarkEChartsDownload"></div>
|
||||
</template>
|
||||
<script setup name="WatermarkEChartsDownload">
|
||||
import { onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const builderJson = {
|
||||
all: 10887,
|
||||
charts: {
|
||||
map: 3237,
|
||||
lines: 2164,
|
||||
bar: 7561,
|
||||
line: 7778,
|
||||
pie: 7355,
|
||||
scatter: 2405,
|
||||
candlestick: 1842,
|
||||
radar: 2090,
|
||||
heatmap: 1762,
|
||||
treemap: 1593,
|
||||
graph: 2060,
|
||||
boxplot: 1537,
|
||||
parallel: 1908,
|
||||
gauge: 2107,
|
||||
funnel: 1692,
|
||||
sankey: 1568
|
||||
},
|
||||
components: {
|
||||
geo: 2788,
|
||||
title: 9575,
|
||||
legend: 9400,
|
||||
tooltip: 9466,
|
||||
grid: 9266,
|
||||
markPoint: 3419,
|
||||
markLine: 2984,
|
||||
timeline: 2739,
|
||||
dataZoom: 2744,
|
||||
visualMap: 2466,
|
||||
toolbox: 3034,
|
||||
polar: 1945
|
||||
},
|
||||
ie: 9743
|
||||
}
|
||||
const downloadJson = {
|
||||
'echarts.min.js': 17365,
|
||||
'echarts.simple.min.js': 4079,
|
||||
'echarts.common.min.js': 6929,
|
||||
'echarts.js': 14890
|
||||
}
|
||||
const themeJson = {
|
||||
'dark.js': 1594,
|
||||
'infographic.js': 925,
|
||||
'shine.js': 1608,
|
||||
'roma.js': 721,
|
||||
'macarons.js': 2179,
|
||||
'vintage.js': 1982
|
||||
}
|
||||
const waterMarkText = 'ECHARTS'
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
canvas.width = canvas.height = 100
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.globalAlpha = 0.08
|
||||
ctx.font = '20px Microsoft Yahei'
|
||||
ctx.translate(50, 50)
|
||||
ctx.rotate(-Math.PI / 4)
|
||||
ctx.fillText(waterMarkText, 0, 0)
|
||||
|
||||
const option = {
|
||||
backgroundColor: {
|
||||
type: 'pattern',
|
||||
image: canvas,
|
||||
repeat: 'repeat'
|
||||
},
|
||||
tooltip: {},
|
||||
title: [
|
||||
{
|
||||
text: '在线构建',
|
||||
subtext: '总计 ' + builderJson.all,
|
||||
left: '25%',
|
||||
textAlign: 'center'
|
||||
},
|
||||
{
|
||||
text: '各版本下载',
|
||||
subtext:
|
||||
'总计 ' +
|
||||
Object.keys(downloadJson).reduce(function (all, key) {
|
||||
return all + downloadJson[key]
|
||||
}, 0),
|
||||
left: '75%',
|
||||
textAlign: 'center'
|
||||
},
|
||||
{
|
||||
text: '主题下载',
|
||||
subtext:
|
||||
'总计 ' +
|
||||
Object.keys(themeJson).reduce(function (all, key) {
|
||||
return all + themeJson[key]
|
||||
}, 0),
|
||||
left: '75%',
|
||||
top: '50%',
|
||||
textAlign: 'center'
|
||||
}
|
||||
],
|
||||
grid: [
|
||||
{
|
||||
top: 50,
|
||||
width: '50%',
|
||||
bottom: '45%',
|
||||
left: 10,
|
||||
containLabel: true
|
||||
},
|
||||
{
|
||||
top: '55%',
|
||||
width: '50%',
|
||||
bottom: 0,
|
||||
left: 10,
|
||||
containLabel: true
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
max: builderJson.all,
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
max: builderJson.all,
|
||||
gridIndex: 1,
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: Object.keys(builderJson.charts),
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 30
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
type: 'category',
|
||||
data: Object.keys(builderJson.components),
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 30
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
stack: 'chart',
|
||||
z: 3,
|
||||
label: {
|
||||
position: 'right',
|
||||
show: true
|
||||
},
|
||||
data: Object.keys(builderJson.charts).map(function (key) {
|
||||
return builderJson.charts[key]
|
||||
})
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
stack: 'chart',
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
color: '#eee'
|
||||
},
|
||||
data: Object.keys(builderJson.charts).map(function (key) {
|
||||
return builderJson.all - builderJson.charts[key]
|
||||
})
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
stack: 'component',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
z: 3,
|
||||
label: {
|
||||
position: 'right',
|
||||
show: true
|
||||
},
|
||||
data: Object.keys(builderJson.components).map(function (key) {
|
||||
return builderJson.components[key]
|
||||
})
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
stack: 'component',
|
||||
silent: true,
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: '#eee'
|
||||
},
|
||||
data: Object.keys(builderJson.components).map(function (key) {
|
||||
return builderJson.all - builderJson.components[key]
|
||||
})
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
radius: [0, '30%'],
|
||||
center: ['75%', '25%'],
|
||||
data: Object.keys(downloadJson).map(function (key) {
|
||||
return {
|
||||
name: key.replace('.js', ''),
|
||||
value: downloadJson[key]
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
radius: [0, '30%'],
|
||||
center: ['75%', '75%'],
|
||||
data: Object.keys(themeJson).map(function (key) {
|
||||
return {
|
||||
name: key.replace('.js', ''),
|
||||
value: themeJson[key]
|
||||
}
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let Echarts = echarts.init(document.getElementById('WatermarkEChartsDownload'))
|
||||
// 绘制图表
|
||||
Echarts.setOption(option)
|
||||
// 自适应大小
|
||||
window.onresize = () => {
|
||||
Echarts.resize()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div id="BingZhuangTu01"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Pie, G2 } from '@antv/g2plot'
|
||||
|
||||
const G = G2.getEngine('canvas')
|
||||
|
||||
const data = [
|
||||
{ sex: '男', sold: 0.45 },
|
||||
{ sex: '女', sold: 0.55 }
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const piePlot = new Pie('BingZhuangTu01', {
|
||||
appendPadding: 10,
|
||||
data,
|
||||
angleField: 'sold',
|
||||
colorField: 'sex',
|
||||
radius: 0.66,
|
||||
color: ['#1677FF', '#f04864'],
|
||||
label: {
|
||||
content: (obj) => {
|
||||
const group = new G.Group({})
|
||||
group.addShape({
|
||||
type: 'image',
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 40,
|
||||
height: 50,
|
||||
img:
|
||||
obj.sex === '男'
|
||||
? 'https://gw.alipayobjects.com/zos/rmsportal/oeCxrAewtedMBYOETCln.png'
|
||||
: 'https://gw.alipayobjects.com/zos/rmsportal/mweUsJpBWucJRixSfWVP.png'
|
||||
}
|
||||
})
|
||||
|
||||
group.addShape({
|
||||
type: 'text',
|
||||
attrs: {
|
||||
x: 20,
|
||||
y: 54,
|
||||
text: obj.sex,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'top',
|
||||
fill: obj.sex === '男' ? '#1677FF' : '#f04864'
|
||||
}
|
||||
})
|
||||
return group
|
||||
}
|
||||
},
|
||||
interactions: [{ type: 'element-active' }]
|
||||
})
|
||||
|
||||
piePlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div id="BingZhuangTu02"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Pie } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{ type: '分类一', value: 27 },
|
||||
{ type: '分类二', value: 25 },
|
||||
{ type: '分类三', value: 18 },
|
||||
{ type: '分类四', value: 15 },
|
||||
{ type: '分类五', value: 10 },
|
||||
{ type: '其他', value: 5 }
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const piePlot = new Pie('BingZhuangTu02', {
|
||||
appendPadding: 10,
|
||||
data,
|
||||
angleField: 'value',
|
||||
colorField: 'type',
|
||||
radius: 0.75,
|
||||
label: {
|
||||
type: 'spider',
|
||||
labelHeight: 28,
|
||||
content: '{name}\n{percentage}'
|
||||
},
|
||||
interactions: [{ type: 'element-selected' }, { type: 'element-active' }]
|
||||
})
|
||||
|
||||
piePlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<div id="BingZhuangTu03"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Pie } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{ type: '分类一', value: 27 },
|
||||
{ type: '分类二', value: 25 },
|
||||
{ type: '分类三', value: 18 },
|
||||
{ type: '分类四', value: 15 },
|
||||
{ type: '分类五', value: 10 },
|
||||
{ type: '其他', value: 5 }
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const piePlot = new Pie('BingZhuangTu03', {
|
||||
appendPadding: 10,
|
||||
data,
|
||||
angleField: 'value',
|
||||
colorField: 'type',
|
||||
radius: 1,
|
||||
innerRadius: 0.6,
|
||||
label: {
|
||||
type: 'inner',
|
||||
offset: '-50%',
|
||||
content: '{value}',
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
|
||||
statistic: {
|
||||
title: false,
|
||||
content: {
|
||||
style: {
|
||||
whiteSpace: 'pre-wrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis'
|
||||
},
|
||||
content: 'AntV\nG2Plot'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
piePlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<div id="BingZhuangTu04"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Pie, measureTextWidth } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{ type: '分类一', value: 27 },
|
||||
{ type: '分类二', value: 25 },
|
||||
{ type: '分类三', value: 18 },
|
||||
{ type: '分类四', value: 15 },
|
||||
{ type: '分类五', value: 10 },
|
||||
{ type: '其他', value: 5 }
|
||||
]
|
||||
|
||||
const renderStatistic = (containerWidth, text, style) => {
|
||||
const { width: textWidth, height: textHeight } = measureTextWidth(text, style)
|
||||
const R = containerWidth / 2
|
||||
// r^2 = (w / 2)^2 + (h - offsetY)^2
|
||||
let scale = 1
|
||||
if (containerWidth < textWidth) {
|
||||
scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1)
|
||||
}
|
||||
const textStyleStr = `width:${containerWidth}px;`
|
||||
return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const piePlot = new Pie('BingZhuangTu04', {
|
||||
appendPadding: 10,
|
||||
data,
|
||||
angleField: 'value',
|
||||
colorField: 'type',
|
||||
radius: 1,
|
||||
innerRadius: 0.64,
|
||||
meta: {
|
||||
value: {
|
||||
formatter: (v) => `${v} ¥`
|
||||
}
|
||||
},
|
||||
label: {
|
||||
type: 'inner',
|
||||
offset: '-50%',
|
||||
style: {
|
||||
textAlign: 'center'
|
||||
},
|
||||
autoRotate: false,
|
||||
content: '{value}'
|
||||
},
|
||||
statistic: {
|
||||
title: {
|
||||
offsetY: -4,
|
||||
customHtml: (container, view, datum) => {
|
||||
const { width, height } = container.getBoundingClientRect()
|
||||
const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2))
|
||||
const text = datum ? datum.type : '总计'
|
||||
return renderStatistic(d, text, { fontSize: 28 })
|
||||
}
|
||||
},
|
||||
content: {
|
||||
offsetY: 4,
|
||||
style: {
|
||||
fontSize: '32px'
|
||||
},
|
||||
customHtml: (container, view, datum, data) => {
|
||||
const { width } = container.getBoundingClientRect()
|
||||
|
||||
const text = datum ? `¥ ${datum.value}` : `¥ ${data.reduce((r, d) => r + d.value, 0)}`
|
||||
return renderStatistic(width, text, { fontSize: 32 })
|
||||
}
|
||||
}
|
||||
},
|
||||
// 添加 中心统计文本 交互
|
||||
interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }]
|
||||
})
|
||||
|
||||
piePlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div id="CiYunTu01"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { WordCloud } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
fetch('https://gw.alipayobjects.com/os/antfincdn/jPKbal7r9r/mock.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const wordCloud = new WordCloud('CiYunTu01', {
|
||||
data,
|
||||
wordField: 'x',
|
||||
weightField: 'value',
|
||||
color: '#122c6a',
|
||||
wordStyle: {
|
||||
fontFamily: 'Verdana',
|
||||
fontSize: [24, 80]
|
||||
},
|
||||
// 设置交互类型
|
||||
interactions: [{ type: 'element-active' }],
|
||||
state: {
|
||||
active: {
|
||||
// 这里可以设置 active 时的样式
|
||||
style: {
|
||||
lineWidth: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
wordCloud.render()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div id="CiYunTu02"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { WordCloud } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/antv-keywords.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const wordCloud = new WordCloud('CiYunTu02', {
|
||||
data,
|
||||
wordField: 'name',
|
||||
weightField: 'value',
|
||||
colorField: 'name',
|
||||
wordStyle: {
|
||||
fontFamily: 'Verdana',
|
||||
fontSize: [8, 32],
|
||||
rotation: 0
|
||||
},
|
||||
// 返回值设置成一个 [0, 1) 区间内的值，
|
||||
// 可以让每次渲染的位置相同（前提是每次的宽高一致）。
|
||||
random: () => 0.5
|
||||
})
|
||||
|
||||
wordCloud.render()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<div id="YiBiaoTu01"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Gauge } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
const gauge = new Gauge('YiBiaoTu01', {
|
||||
percent: 0.75,
|
||||
range: {
|
||||
ticks: [0, 1 / 3, 2 / 3, 1],
|
||||
color: ['#F4664A', '#FAAD14', '#30BF78']
|
||||
},
|
||||
indicator: {
|
||||
pointer: {
|
||||
style: {
|
||||
stroke: '#D0D0D0'
|
||||
}
|
||||
},
|
||||
pin: {
|
||||
style: {
|
||||
stroke: '#D0D0D0'
|
||||
}
|
||||
}
|
||||
},
|
||||
statistic: {
|
||||
content: {
|
||||
style: {
|
||||
fontSize: '36px',
|
||||
lineHeight: '36px'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
gauge.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<div id="YiBiaoTu02"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Liquid } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
const liquidPlot = new Liquid('YiBiaoTu02', {
|
||||
percent: 0.25,
|
||||
outline: {
|
||||
border: 4,
|
||||
distance: 8
|
||||
},
|
||||
wave: {
|
||||
length: 128
|
||||
}
|
||||
})
|
||||
liquidPlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<div id="YiBiaoTu03"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Gauge } from '@antv/g2plot'
|
||||
|
||||
const ticks = [0, 1 / 3, 2 / 3, 1]
|
||||
const color = ['#F4664A', '#FAAD14', '#30BF78']
|
||||
|
||||
onMounted(() => {
|
||||
const gauge = new Gauge('YiBiaoTu03', {
|
||||
percent: 0,
|
||||
range: {
|
||||
ticks: [0, 1],
|
||||
color: ['l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78']
|
||||
},
|
||||
indicator: {
|
||||
pointer: {
|
||||
style: {
|
||||
stroke: '#D0D0D0'
|
||||
}
|
||||
},
|
||||
pin: {
|
||||
style: {
|
||||
stroke: '#D0D0D0'
|
||||
}
|
||||
}
|
||||
},
|
||||
statistic: {
|
||||
title: {
|
||||
formatter: ({ percent }) => {
|
||||
if (percent < ticks[1]) {
|
||||
return '差'
|
||||
}
|
||||
if (percent < ticks[2]) {
|
||||
return '中'
|
||||
}
|
||||
return '优'
|
||||
},
|
||||
style: ({ percent }) => {
|
||||
return {
|
||||
fontSize: '36px',
|
||||
lineHeight: 1,
|
||||
color: percent < ticks[1] ? color[0] : percent < ticks[2] ? color[1] : color[2]
|
||||
}
|
||||
}
|
||||
},
|
||||
content: {
|
||||
offsetY: 36,
|
||||
style: {
|
||||
fontSize: '24px',
|
||||
color: '#4B535E'
|
||||
},
|
||||
formatter: () => '系统表现'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
gauge.render()
|
||||
let data = 0.7
|
||||
const interval = setInterval(() => {
|
||||
if (data >= 1.5) {
|
||||
clearInterval(interval)
|
||||
}
|
||||
data += 0.005
|
||||
gauge.changeData(data > 1 ? data - 1 : data)
|
||||
}, 100)
|
||||
})
|
||||
</script>
|
||||
@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div id="YiBiaoTu04"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Liquid, measureTextWidth } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
const liquidPlot = new Liquid(document.getElementById('YiBiaoTu04'), {
|
||||
percent: 0.26,
|
||||
radius: 0.8,
|
||||
statistic: {
|
||||
title: {
|
||||
formatter: () => '盈利率',
|
||||
style: ({ percent }) => ({
|
||||
fill: percent > 0.65 ? 'white' : 'rgba(44,53,66,0.85)'
|
||||
})
|
||||
},
|
||||
content: {
|
||||
style: ({ percent }) => ({
|
||||
fontSize: 60,
|
||||
lineHeight: 1,
|
||||
fill: percent > 0.65 ? 'white' : 'rgba(44,53,66,0.85)'
|
||||
}),
|
||||
customHtml: (container, view, { percent }) => {
|
||||
const { width, height } = container.getBoundingClientRect()
|
||||
const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2))
|
||||
const text = `占比 ${(percent * 100).toFixed(0)}%`
|
||||
const textWidth = measureTextWidth(text, { fontSize: 60 })
|
||||
const scale = Math.min(d / textWidth, 1)
|
||||
return `<div style="width:${d}px;display:flex;align-items:center;justify-content:center;font-size:${scale}em;line-height:${
|
||||
scale <= 1 ? 1 : 'inherit'
|
||||
}">${text}</div>`
|
||||
}
|
||||
}
|
||||
},
|
||||
liquidStyle: ({ percent }) => {
|
||||
return {
|
||||
fill: percent > 0.45 ? '#5B8FF9' : '#FAAD14',
|
||||
stroke: percent > 0.45 ? '#5B8FF9' : '#FAAD14'
|
||||
}
|
||||
},
|
||||
color: () => '#5B8FF9'
|
||||
})
|
||||
liquidPlot.render()
|
||||
|
||||
let data = 0.25
|
||||
const interval = setInterval(() => {
|
||||
data += Math.min(Math.random() * 0.1, 0.1)
|
||||
if (data < 0.75) {
|
||||
liquidPlot.changeData(data)
|
||||
} else {
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, 500)
|
||||
})
|
||||
</script>
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<div id="LouDouTu01"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Funnel } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{ stage: '简历筛选', number: 253 },
|
||||
{ stage: '初试人数', number: 151 },
|
||||
{ stage: '复试人数', number: 113 },
|
||||
{ stage: '录取人数', number: 87 },
|
||||
{ stage: '入职人数', number: 59 }
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const funnelPlot = new Funnel('LouDouTu01', {
|
||||
data: data,
|
||||
xField: 'stage',
|
||||
yField: 'number',
|
||||
legend: false
|
||||
})
|
||||
|
||||
funnelPlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div id="LouDouTu02"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Funnel } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{ stage: '简历筛选', number: 253, company: 'A公司' },
|
||||
{ stage: '初试人数', number: 151, company: 'A公司' },
|
||||
{ stage: '复试人数', number: 113, company: 'A公司' },
|
||||
{ stage: '录取人数', number: 87, company: 'A公司' },
|
||||
{ stage: '入职人数', number: 59, company: 'A公司' },
|
||||
{ stage: '简历筛选', number: 303, company: 'B公司' },
|
||||
{ stage: '初试人数', number: 251, company: 'B公司' },
|
||||
{ stage: '复试人数', number: 153, company: 'B公司' },
|
||||
{ stage: '录取人数', number: 117, company: 'B公司' },
|
||||
{ stage: '入职人数', number: 79, company: 'B公司' }
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const funnelPlot = new Funnel('LouDouTu02', {
|
||||
data,
|
||||
xField: 'stage',
|
||||
yField: 'number',
|
||||
compareField: 'company',
|
||||
meta: {
|
||||
stage: {
|
||||
alias: '行为'
|
||||
},
|
||||
pv: {
|
||||
alias: '人数',
|
||||
formatter: (v) => `${v}次`
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
fields: ['stage', 'number', 'company'],
|
||||
formatter: (v) => ({
|
||||
name: `${v.company}的${v.stage}`,
|
||||
value: v.number
|
||||
})
|
||||
},
|
||||
legend: false
|
||||
})
|
||||
funnelPlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div id="MianJiTu01"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Area } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/360c3eae-0c73-46f0-a982-4746a6095010.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const area = new Area('MianJiTu01', {
|
||||
data,
|
||||
xField: 'timePeriod',
|
||||
yField: 'value',
|
||||
xAxis: {
|
||||
range: [0, 1]
|
||||
}
|
||||
})
|
||||
area.render()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div id="MianJiTu02"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Area } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const area = new Area('MianJiTu02', {
|
||||
data,
|
||||
xField: 'Date',
|
||||
yField: 'scales',
|
||||
xAxis: {
|
||||
range: [0, 1],
|
||||
tickCount: 5
|
||||
},
|
||||
areaStyle: () => {
|
||||
return {
|
||||
fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1677FF'
|
||||
}
|
||||
}
|
||||
})
|
||||
area.render()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<div id="ZiDanTu03"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Area } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/b21e7336-0b3e-486c-9070-612ede49284e.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const area = new Area('ZiDanTu03', {
|
||||
data,
|
||||
xField: 'date',
|
||||
yField: 'value',
|
||||
seriesField: 'country'
|
||||
})
|
||||
area.render()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div id="ZiDanTu04"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Area } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/67ef5751-b228-417c-810a-962f978af3e7.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const area = new Area('ZiDanTu04', {
|
||||
data,
|
||||
xField: 'year',
|
||||
yField: 'value',
|
||||
seriesField: 'country',
|
||||
color: ['#82d1de', '#cb302d', '#e3ca8c'],
|
||||
areaStyle: {
|
||||
fillOpacity: 0.7
|
||||
},
|
||||
appendPadding: 10,
|
||||
isPercent: true,
|
||||
yAxis: {
|
||||
label: {
|
||||
formatter: (value) => {
|
||||
return value * 100
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
area.render()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div id="SanDianTu01"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Scatter } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const scatterPlot = new Scatter('SanDianTu01', {
|
||||
appendPadding: 10,
|
||||
data,
|
||||
xField: 'Revenue (Millions)',
|
||||
yField: 'Rating',
|
||||
shape: 'circle',
|
||||
colorField: 'Genre',
|
||||
size: 4,
|
||||
yAxis: {
|
||||
nice: true,
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#aaa'
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
min: -100,
|
||||
grid: {
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#eee'
|
||||
}
|
||||
}
|
||||
},
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#aaa'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
scatterPlot.render()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<div id="SanDianTu02"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Scatter } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
fetch('https://gw.alipayobjects.com/os/antfincdn/t81X1wXdoj/scatter-data.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const scatterPlot = new Scatter('SanDianTu02', {
|
||||
appendPadding: 30,
|
||||
data,
|
||||
xField: 'x',
|
||||
yField: 'y',
|
||||
colorField: 'genre',
|
||||
color: [
|
||||
'r(0.4, 0.3, 0.7) 0:rgba(255,255,255,0.5) 1:#5B8FF9',
|
||||
'r(0.4, 0.4, 0.7) 0:rgba(255,255,255,0.5) 1:#61DDAA'
|
||||
],
|
||||
sizeField: 'size',
|
||||
size: [5, 20],
|
||||
shape: 'circle',
|
||||
yAxis: {
|
||||
nice: true,
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#eee'
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
grid: {
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#eee'
|
||||
}
|
||||
}
|
||||
},
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#eee'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
scatterPlot.render()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<div id="SanDianTu03"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Scatter } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/3e4db10a-9da1-4b44-80d8-c128f42764a8.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const scatterPlot = new Scatter('SanDianTu03', {
|
||||
appendPadding: 30,
|
||||
data,
|
||||
xField: 'xG conceded',
|
||||
yField: 'Shot conceded',
|
||||
colorField: 'Result',
|
||||
size: 5,
|
||||
shape: 'circle',
|
||||
pointStyle: {
|
||||
fillOpacity: 1
|
||||
},
|
||||
yAxis: {
|
||||
nice: true,
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#aaa'
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
grid: {
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#eee'
|
||||
}
|
||||
}
|
||||
},
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#aaa'
|
||||
}
|
||||
}
|
||||
},
|
||||
label: {}
|
||||
})
|
||||
scatterPlot.render()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,337 +0,0 @@
|
||||
<template>
|
||||
<div id="SanDianTu04"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Scatter } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{
|
||||
city: '上海',
|
||||
搜索UV: 1.5,
|
||||
端DAU: 6,
|
||||
搜索DAU渗透率: 3
|
||||
},
|
||||
{
|
||||
city: '台北',
|
||||
搜索UV: 2,
|
||||
端DAU: 5,
|
||||
搜索DAU渗透率: 13
|
||||
},
|
||||
{
|
||||
city: '北京',
|
||||
搜索UV: 7,
|
||||
端DAU: 3.6,
|
||||
搜索DAU渗透率: 16
|
||||
},
|
||||
{
|
||||
city: '济南',
|
||||
搜索UV: 5,
|
||||
端DAU: 5,
|
||||
搜索DAU渗透率: 16
|
||||
},
|
||||
{
|
||||
city: '青岛',
|
||||
搜索UV: 2,
|
||||
端DAU: 1,
|
||||
搜索DAU渗透率: 19
|
||||
},
|
||||
{
|
||||
city: '杭州',
|
||||
搜索UV: 7,
|
||||
端DAU: 2,
|
||||
搜索DAU渗透率: 90
|
||||
},
|
||||
{
|
||||
city: '广东',
|
||||
搜索UV: 7.4,
|
||||
端DAU: 1.5,
|
||||
搜索DAU渗透率: 30
|
||||
},
|
||||
{
|
||||
city: '无锡',
|
||||
搜索UV: 1,
|
||||
端DAU: 1,
|
||||
搜索DAU渗透率: 34
|
||||
},
|
||||
{
|
||||
city: '重庆',
|
||||
搜索UV: 7,
|
||||
端DAU: 5,
|
||||
搜索DAU渗透率: 46
|
||||
},
|
||||
{
|
||||
city: '成都',
|
||||
搜索UV: 3.4,
|
||||
端DAU: 2.3,
|
||||
搜索DAU渗透率: 49
|
||||
},
|
||||
{
|
||||
city: '哈尔滨',
|
||||
搜索UV: 0.5,
|
||||
端DAU: 6.5,
|
||||
搜索DAU渗透率: 51
|
||||
},
|
||||
{
|
||||
city: '内蒙古',
|
||||
搜索UV: 2.5,
|
||||
端DAU: 5,
|
||||
搜索DAU渗透率: 51
|
||||
},
|
||||
{
|
||||
city: '云南',
|
||||
搜索UV: 1,
|
||||
端DAU: 5,
|
||||
搜索DAU渗透率: 53
|
||||
},
|
||||
{
|
||||
city: '河北',
|
||||
搜索UV: 6,
|
||||
端DAU: 5,
|
||||
搜索DAU渗透率: 57
|
||||
},
|
||||
{
|
||||
city: '陕西',
|
||||
搜索UV: 2,
|
||||
端DAU: 3,
|
||||
搜索DAU渗透率: 57
|
||||
},
|
||||
{
|
||||
city: '苏州',
|
||||
搜索UV: 3,
|
||||
端DAU: 4.6,
|
||||
搜索DAU渗透率: 65
|
||||
},
|
||||
{
|
||||
city: '四川',
|
||||
搜索UV: 6,
|
||||
端DAU: 7,
|
||||
搜索DAU渗透率: 68
|
||||
},
|
||||
{
|
||||
city: '贵阳',
|
||||
搜索UV: 5,
|
||||
端DAU: 3.4,
|
||||
搜索DAU渗透率: 68
|
||||
},
|
||||
{
|
||||
city: '台湾',
|
||||
搜索UV: 5,
|
||||
端DAU: 2,
|
||||
搜索DAU渗透率: 69
|
||||
},
|
||||
{
|
||||
city: '哈尔滨',
|
||||
搜索UV: 2,
|
||||
端DAU: 7,
|
||||
搜索DAU渗透率: 78
|
||||
},
|
||||
{
|
||||
city: '天津',
|
||||
搜索UV: 4.4,
|
||||
端DAU: 5,
|
||||
搜索DAU渗透率: 45
|
||||
},
|
||||
{
|
||||
city: '长沙',
|
||||
搜索UV: 3.4,
|
||||
端DAU: 7,
|
||||
搜索DAU渗透率: 29
|
||||
},
|
||||
{
|
||||
city: '沧州',
|
||||
搜索UV: 3,
|
||||
端DAU: 1,
|
||||
搜索DAU渗透率: 94
|
||||
},
|
||||
{
|
||||
city: '宁波',
|
||||
搜索UV: 6,
|
||||
端DAU: 3,
|
||||
搜索DAU渗透率: 99
|
||||
}
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const scatterPlot = new Scatter('SanDianTu04', {
|
||||
height: 400,
|
||||
autoFit: false,
|
||||
appendPadding: 16,
|
||||
data,
|
||||
xField: '搜索UV',
|
||||
yField: '端DAU',
|
||||
sizeField: '搜索DAU渗透率',
|
||||
size: [12, 30],
|
||||
shape: 'circle',
|
||||
pointStyle: {
|
||||
fill: '#D6E3FD',
|
||||
fillOpacity: 0.6,
|
||||
stroke: '#6d9bf9'
|
||||
},
|
||||
tooltip: {
|
||||
showTitle: true,
|
||||
showMarkers: false,
|
||||
fields: ['搜索UV', '端DAU', '搜索DAU渗透率'],
|
||||
customContent: (title, items) => {
|
||||
const field = items?.[0]
|
||||
const formatterInfo = {
|
||||
搜索UV: (value) => value + '万',
|
||||
端DAU: (value) => value + '万',
|
||||
搜索DAU渗透率: () => '%'
|
||||
}
|
||||
let htmlStr = `<div style="margin:10px 0;font-weight:700;">${field?.data?.city}</div><div class="g2-tooltip-items">`
|
||||
items.forEach((item) => {
|
||||
htmlStr += `<div class="g2-tooltip-item" style="margin-bottom:8px;display:flex;justify-content:space-between;">
|
||||
<span class="g2-tooltip-item-label" style="margin-right: 12px;">${item.name}</span>
|
||||
<span class="g2-tooltip-item-value">${item.value + formatterInfo[item.name](item.value)}</span>
|
||||
</div>`
|
||||
})
|
||||
htmlStr += '</div>'
|
||||
return htmlStr
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
grid: {
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#eee'
|
||||
}
|
||||
}
|
||||
},
|
||||
label: {
|
||||
formatter: (v) => v !== '0' ? v + '%' : v
|
||||
},
|
||||
line: null
|
||||
},
|
||||
label: {
|
||||
formatter: (item) => {
|
||||
return item.city
|
||||
},
|
||||
offsetY: 12,
|
||||
style: {
|
||||
fontSize: 12,
|
||||
fill: 'rgba(0,0,0,0.85)'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
line: null,
|
||||
label: {
|
||||
formatter: (v) => v !== '0' ? v + '%' : v
|
||||
}
|
||||
},
|
||||
annotations: [
|
||||
{
|
||||
type: 'text',
|
||||
position: [4, 8],
|
||||
content: '搜索DAU渗透率',
|
||||
offsetY: -8,
|
||||
style: {
|
||||
fontSize: 12,
|
||||
textAlign: 'center'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
position: [8, 4],
|
||||
content: '搜索DAU渗透率',
|
||||
rotate: Math.PI / 2,
|
||||
offsetY: -40,
|
||||
offsetX: 8,
|
||||
style: {
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'region',
|
||||
start: [7, 7],
|
||||
end: [7.8, 7.8],
|
||||
top: true,
|
||||
style: {
|
||||
fill: '#fff',
|
||||
fillOpacity: 0.5,
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'region',
|
||||
start: [0.2, 7],
|
||||
end: [1, 7.8],
|
||||
top: true,
|
||||
style: {
|
||||
fill: '#fff',
|
||||
fillOpacity: 0.5,
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'region',
|
||||
start: [7, 0.2],
|
||||
end: [7.8, 1],
|
||||
top: true,
|
||||
style: {
|
||||
fill: '#fff',
|
||||
fillOpacity: 0.5,
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
],
|
||||
quadrant: {
|
||||
xBaseline: 4,
|
||||
yBaseline: 4,
|
||||
lineStyle: {
|
||||
lineDash: [4, 2],
|
||||
lineWidth: 2
|
||||
},
|
||||
regionStyle: [
|
||||
{
|
||||
fill: '#5bd8a6',
|
||||
fillOpacity: 0.1
|
||||
},
|
||||
{
|
||||
fill: '#667796',
|
||||
fillOpacity: 0.1
|
||||
},
|
||||
{
|
||||
fill: '#fff'
|
||||
},
|
||||
{
|
||||
fill: '#f7664e',
|
||||
fillOpacity: 0.1
|
||||
}
|
||||
],
|
||||
labels: [
|
||||
{
|
||||
content: '热门市场',
|
||||
position: [7.2, 7],
|
||||
style: {
|
||||
fill: 'rgba(0,0,0, 0.85)',
|
||||
textAlign: 'start'
|
||||
}
|
||||
},
|
||||
{
|
||||
content: '潜力市场',
|
||||
position: [0.2, 7],
|
||||
style: {
|
||||
fill: 'rgba(0,0,0, 0.85)',
|
||||
textAlign: 'start'
|
||||
}
|
||||
},
|
||||
{
|
||||
content: ''
|
||||
},
|
||||
{
|
||||
content: '提频市场',
|
||||
position: [7.2, 1],
|
||||
style: {
|
||||
fill: 'rgba(0,0,0, 0.85)',
|
||||
textAlign: 'start'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
scatterPlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div id="TiaoXingTu01"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Bar } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{ year: '1951 年', value: 38 },
|
||||
{ year: '1952 年', value: 52 },
|
||||
{ year: '1956 年', value: 61 },
|
||||
{ year: '1957 年', value: 145 },
|
||||
{ year: '1958 年', value: 48 }
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const bar = new Bar('TiaoXingTu01', {
|
||||
data,
|
||||
xField: 'value',
|
||||
yField: 'year',
|
||||
seriesField: 'year',
|
||||
legend: {
|
||||
position: 'top-left'
|
||||
}
|
||||
})
|
||||
|
||||
bar.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,126 +0,0 @@
|
||||
<template>
|
||||
<div id="TiaoXingTu02"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Bar } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{
|
||||
year: '1991',
|
||||
value: 3,
|
||||
type: 'Lon'
|
||||
},
|
||||
{
|
||||
year: '1992',
|
||||
value: 4,
|
||||
type: 'Lon'
|
||||
},
|
||||
{
|
||||
year: '1993',
|
||||
value: 3.5,
|
||||
type: 'Lon'
|
||||
},
|
||||
{
|
||||
year: '1994',
|
||||
value: 5,
|
||||
type: 'Lon'
|
||||
},
|
||||
{
|
||||
year: '1995',
|
||||
value: 4.9,
|
||||
type: 'Lon'
|
||||
},
|
||||
{
|
||||
year: '1996',
|
||||
value: 6,
|
||||
type: 'Lon'
|
||||
},
|
||||
{
|
||||
year: '1997',
|
||||
value: 7,
|
||||
type: 'Lon'
|
||||
},
|
||||
{
|
||||
year: '1998',
|
||||
value: 9,
|
||||
type: 'Lon'
|
||||
},
|
||||
{
|
||||
year: '1999',
|
||||
value: 13,
|
||||
type: 'Lon'
|
||||
},
|
||||
{
|
||||
year: '1991',
|
||||
value: 3,
|
||||
type: 'Bor'
|
||||
},
|
||||
{
|
||||
year: '1992',
|
||||
value: 4,
|
||||
type: 'Bor'
|
||||
},
|
||||
{
|
||||
year: '1993',
|
||||
value: 3.5,
|
||||
type: 'Bor'
|
||||
},
|
||||
{
|
||||
year: '1994',
|
||||
value: 5,
|
||||
type: 'Bor'
|
||||
},
|
||||
{
|
||||
year: '1995',
|
||||
value: 4.9,
|
||||
type: 'Bor'
|
||||
},
|
||||
{
|
||||
year: '1996',
|
||||
value: 6,
|
||||
type: 'Bor'
|
||||
},
|
||||
{
|
||||
year: '1997',
|
||||
value: 7,
|
||||
type: 'Bor'
|
||||
},
|
||||
{
|
||||
year: '1998',
|
||||
value: 9,
|
||||
type: 'Bor'
|
||||
},
|
||||
{
|
||||
year: '1999',
|
||||
value: 13,
|
||||
type: 'Bor'
|
||||
}
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const stackedBarPlot = new Bar('TiaoXingTu02', {
|
||||
data: data.reverse(),
|
||||
isStack: true,
|
||||
xField: 'value',
|
||||
yField: 'year',
|
||||
seriesField: 'type',
|
||||
label: {
|
||||
// 可手动配置 label 数据标签位置
|
||||
position: 'middle', // 'left', 'middle', 'right'
|
||||
// 可配置附加的布局方法
|
||||
layout: [
|
||||
// 柱形图数据标签位置自动调整
|
||||
{ type: 'interval-adjust-position' },
|
||||
// 数据标签防遮挡
|
||||
{ type: 'interval-hide-overlap' },
|
||||
// 数据标签文颜色自动调整
|
||||
{ type: 'adjust-color' }
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
stackedBarPlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<div id="TiaoXingTu03"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Bar } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{
|
||||
label: 'Mon.',
|
||||
type: 'series1',
|
||||
value: 2800
|
||||
},
|
||||
{
|
||||
label: 'Mon.',
|
||||
type: 'series2',
|
||||
value: 2260
|
||||
},
|
||||
{
|
||||
label: 'Tues.',
|
||||
type: 'series1',
|
||||
value: 1800
|
||||
},
|
||||
{
|
||||
label: 'Tues.',
|
||||
type: 'series2',
|
||||
value: 1300
|
||||
},
|
||||
{
|
||||
label: 'Wed.',
|
||||
type: 'series1',
|
||||
value: 950
|
||||
},
|
||||
{
|
||||
label: 'Wed.',
|
||||
type: 'series2',
|
||||
value: 900
|
||||
},
|
||||
{
|
||||
label: 'Thur.',
|
||||
type: 'series1',
|
||||
value: 500
|
||||
},
|
||||
{
|
||||
label: 'Thur.',
|
||||
type: 'series2',
|
||||
value: 390
|
||||
},
|
||||
{
|
||||
label: 'Fri.',
|
||||
type: 'series1',
|
||||
value: 170
|
||||
},
|
||||
{
|
||||
label: 'Fri.',
|
||||
type: 'series2',
|
||||
value: 100
|
||||
}
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const stackedBarPlot = new Bar('TiaoXingTu03', {
|
||||
data,
|
||||
isGroup: true,
|
||||
xField: 'value',
|
||||
yField: 'label',
|
||||
/** 自定义颜色 */
|
||||
// color: ['#1383ab', '#c52125'],
|
||||
seriesField: 'type',
|
||||
marginRatio: 0,
|
||||
label: {
|
||||
// 可手动配置 label 数据标签位置
|
||||
position: 'middle', // 'left', 'middle', 'right'
|
||||
// 可配置附加的布局方法
|
||||
layout: [
|
||||
// 柱形图数据标签位置自动调整
|
||||
{ type: 'interval-adjust-position' },
|
||||
// 数据标签防遮挡
|
||||
{ type: 'interval-hide-overlap' },
|
||||
// 数据标签文颜色自动调整
|
||||
{ type: 'adjust-color' }
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
stackedBarPlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<div id="TiaoXingTu04"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Bar } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{ type: '分类一', values: [76, 100] },
|
||||
{ type: '分类二', values: [56, 108] },
|
||||
{ type: '分类三', values: [38, 129] },
|
||||
{ type: '分类四', values: [58, 155] },
|
||||
{ type: '分类五', values: [45, 120] },
|
||||
{ type: '分类六', values: [23, 99] },
|
||||
{ type: '分类七', values: [18, 56] },
|
||||
{ type: '分类八', values: [18, 34] }
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const barPlot = new Bar('TiaoXingTu04', {
|
||||
data: data.reverse(),
|
||||
xField: 'values',
|
||||
yField: 'type',
|
||||
isRange: true,
|
||||
label: {
|
||||
position: 'middle',
|
||||
layout: [{ type: 'adjust-color' }]
|
||||
}
|
||||
})
|
||||
|
||||
barPlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<div id="ZheXianTu01"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Line } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const line = new Line('ZheXianTu01', {
|
||||
data,
|
||||
padding: 'auto',
|
||||
xField: 'Date',
|
||||
yField: 'scales',
|
||||
xAxis: {
|
||||
// type: 'timeCat',
|
||||
tickCount: 5
|
||||
}
|
||||
})
|
||||
|
||||
line.render()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div id="ZheXianTu02"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Line } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const line = new Line('ZheXianTu02', {
|
||||
data,
|
||||
xField: 'year',
|
||||
yField: 'value',
|
||||
seriesField: 'category',
|
||||
xAxis: {
|
||||
type: 'time'
|
||||
},
|
||||
yAxis: {
|
||||
label: {
|
||||
// 数值格式化为千分位
|
||||
formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
line.render()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div id="ZheXianTu03"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Line } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{ year: '1991', value: 3 },
|
||||
{ year: '1992', value: 4 },
|
||||
{ year: '1993', value: 3.5 },
|
||||
{ year: '1994', value: 5 },
|
||||
{ year: '1995', value: 4.9 },
|
||||
{ year: '1996', value: 6 },
|
||||
{ year: '1997', value: 7 },
|
||||
{ year: '1998', value: 9 },
|
||||
{ year: '1999', value: 13 },
|
||||
{ year: '1999', value: 8 }
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const linePlot = new Line('ZheXianTu03', {
|
||||
data,
|
||||
xField: 'year',
|
||||
yField: 'value',
|
||||
stepType: 'vh'
|
||||
})
|
||||
|
||||
linePlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div id="ZheXianTu04"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Line } from '@antv/g2plot'
|
||||
|
||||
const seriesKey = 'series'
|
||||
const valueKey = 'value'
|
||||
const processData = (data, yFields, meta) => {
|
||||
const result = []
|
||||
data.forEach((d) => {
|
||||
yFields.forEach((yField) => {
|
||||
const name = meta?.[yField]?.alias || yField
|
||||
result.push({ ...d, [seriesKey]: name, [valueKey]: d[yField] })
|
||||
})
|
||||
})
|
||||
return result
|
||||
}
|
||||
onMounted(() => {
|
||||
fetch('https://gw.alipayobjects.com/os/antfincdn/nHVKXA8ClI/multiple-measures-line-data.json')
|
||||
.then((data) => data.json())
|
||||
.then((data) => {
|
||||
const meta = {
|
||||
date: {
|
||||
alias: '销售日期'
|
||||
},
|
||||
price: {
|
||||
alias: '单价'
|
||||
},
|
||||
discount_price: {
|
||||
alias: '折扣单价'
|
||||
}
|
||||
}
|
||||
const line = new Line('ZheXianTu04', {
|
||||
data: processData(data, ['price', 'discount_price'], meta),
|
||||
padding: 'auto',
|
||||
xField: 'date',
|
||||
yField: valueKey,
|
||||
seriesField: seriesKey,
|
||||
appendPadding: [0, 8, 0, 0]
|
||||
})
|
||||
|
||||
line.render()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<div id="ZhuZhuangTu01"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Column } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{
|
||||
type: '家具家电',
|
||||
sales: 38
|
||||
},
|
||||
{
|
||||
type: '粮油副食',
|
||||
sales: 52
|
||||
},
|
||||
{
|
||||
type: '生鲜水果',
|
||||
sales: 61
|
||||
},
|
||||
{
|
||||
type: '美容洗护',
|
||||
sales: 145
|
||||
},
|
||||
{
|
||||
type: '母婴用品',
|
||||
sales: 48
|
||||
},
|
||||
{
|
||||
type: '进口食品',
|
||||
sales: 38
|
||||
},
|
||||
{
|
||||
type: '食品饮料',
|
||||
sales: 38
|
||||
},
|
||||
{
|
||||
type: '家庭清洁',
|
||||
sales: 38
|
||||
}
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const columnPlot = new Column('ZhuZhuangTu01', {
|
||||
data,
|
||||
xField: 'type',
|
||||
yField: 'sales',
|
||||
label: {
|
||||
// 可手动配置 label 数据标签位置
|
||||
position: 'middle', // 'top', 'bottom', 'middle',
|
||||
// 配置样式
|
||||
style: {
|
||||
fill: '#FFFFFF',
|
||||
opacity: 0.6
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
label: {
|
||||
autoHide: true,
|
||||
autoRotate: false
|
||||
}
|
||||
},
|
||||
meta: {
|
||||
type: {
|
||||
alias: '类别'
|
||||
},
|
||||
sales: {
|
||||
alias: '销售额'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
columnPlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div id="ZhuZhuangTu02"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Column } from '@antv/g2plot'
|
||||
|
||||
onMounted(() => {
|
||||
fetch('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json')
|
||||
.then((data) => data.json())
|
||||
.then((data) => {
|
||||
const stackedColumnPlot = new Column('ZhuZhuangTu02', {
|
||||
data,
|
||||
isStack: true,
|
||||
xField: 'year',
|
||||
yField: 'value',
|
||||
seriesField: 'type',
|
||||
label: {
|
||||
// 可手动配置 label 数据标签位置
|
||||
position: 'middle', // 'top', 'bottom', 'middle'
|
||||
// 可配置附加的布局方法
|
||||
layout: [
|
||||
// 柱形图数据标签位置自动调整
|
||||
{ type: 'interval-adjust-position' },
|
||||
// 数据标签防遮挡
|
||||
{ type: 'interval-hide-overlap' },
|
||||
// 数据标签文颜色自动调整
|
||||
{ type: 'adjust-color' }
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
stackedColumnPlot.render()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<div id="ZhuZhuangTu03"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Column } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: 'London',
|
||||
月份: 'Jan.',
|
||||
月均降雨量: 18.9
|
||||
},
|
||||
{
|
||||
name: 'London',
|
||||
月份: 'Feb.',
|
||||
月均降雨量: 28.8
|
||||
},
|
||||
{
|
||||
name: 'London',
|
||||
月份: 'Mar.',
|
||||
月均降雨量: 39.3
|
||||
},
|
||||
{
|
||||
name: 'London',
|
||||
月份: 'Apr.',
|
||||
月均降雨量: 81.4
|
||||
},
|
||||
{
|
||||
name: 'London',
|
||||
月份: 'May',
|
||||
月均降雨量: 47
|
||||
},
|
||||
{
|
||||
name: 'London',
|
||||
月份: 'Jun.',
|
||||
月均降雨量: 20.3
|
||||
},
|
||||
{
|
||||
name: 'London',
|
||||
月份: 'Jul.',
|
||||
月均降雨量: 24
|
||||
},
|
||||
{
|
||||
name: 'London',
|
||||
月份: 'Aug.',
|
||||
月均降雨量: 35.6
|
||||
},
|
||||
{
|
||||
name: 'Berlin',
|
||||
月份: 'Jan.',
|
||||
月均降雨量: 12.4
|
||||
},
|
||||
{
|
||||
name: 'Berlin',
|
||||
月份: 'Feb.',
|
||||
月均降雨量: 23.2
|
||||
},
|
||||
{
|
||||
name: 'Berlin',
|
||||
月份: 'Mar.',
|
||||
月均降雨量: 34.5
|
||||
},
|
||||
{
|
||||
name: 'Berlin',
|
||||
月份: 'Apr.',
|
||||
月均降雨量: 99.7
|
||||
},
|
||||
{
|
||||
name: 'Berlin',
|
||||
月份: 'May',
|
||||
月均降雨量: 52.6
|
||||
},
|
||||
{
|
||||
name: 'Berlin',
|
||||
月份: 'Jun.',
|
||||
月均降雨量: 35.5
|
||||
},
|
||||
{
|
||||
name: 'Berlin',
|
||||
月份: 'Jul.',
|
||||
月均降雨量: 37.4
|
||||
},
|
||||
{
|
||||
name: 'Berlin',
|
||||
月份: 'Aug.',
|
||||
月均降雨量: 42.4
|
||||
}
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const stackedColumnPlot = new Column('ZhuZhuangTu03', {
|
||||
data,
|
||||
isGroup: true,
|
||||
xField: '月份',
|
||||
yField: '月均降雨量',
|
||||
seriesField: 'name',
|
||||
/** 设置颜色 */
|
||||
//color: ['#1ca9e6', '#f88c24'],
|
||||
/** 设置间距 */
|
||||
// marginRatio: 0.1,
|
||||
label: {
|
||||
// 可手动配置 label 数据标签位置
|
||||
position: 'middle', // 'top', 'middle', 'bottom'
|
||||
// 可配置附加的布局方法
|
||||
layout: [
|
||||
// 柱形图数据标签位置自动调整
|
||||
{ type: 'interval-adjust-position' },
|
||||
// 数据标签防遮挡
|
||||
{ type: 'interval-hide-overlap' },
|
||||
// 数据标签文颜色自动调整
|
||||
{ type: 'adjust-color' }
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
stackedColumnPlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<div id="ZhuZhuangTu04"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Column } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{
|
||||
country: 'Asia',
|
||||
year: '1750',
|
||||
value: 502
|
||||
},
|
||||
{
|
||||
country: 'Asia',
|
||||
year: '1800',
|
||||
value: 635
|
||||
},
|
||||
{
|
||||
country: 'Asia',
|
||||
year: '1850',
|
||||
value: 809
|
||||
},
|
||||
{
|
||||
country: 'Asia',
|
||||
year: '1900',
|
||||
value: 947
|
||||
},
|
||||
{
|
||||
country: 'Asia',
|
||||
year: '1950',
|
||||
value: 1402
|
||||
},
|
||||
{
|
||||
country: 'Asia',
|
||||
year: '1999',
|
||||
value: 3634
|
||||
},
|
||||
{
|
||||
country: 'Asia',
|
||||
year: '2050',
|
||||
value: 5268
|
||||
},
|
||||
{
|
||||
country: 'Africa',
|
||||
year: '1750',
|
||||
value: 106
|
||||
},
|
||||
{
|
||||
country: 'Africa',
|
||||
year: '1800',
|
||||
value: 107
|
||||
},
|
||||
{
|
||||
country: 'Africa',
|
||||
year: '1850',
|
||||
value: 111
|
||||
},
|
||||
{
|
||||
country: 'Africa',
|
||||
year: '1900',
|
||||
value: 133
|
||||
},
|
||||
{
|
||||
country: 'Africa',
|
||||
year: '1950',
|
||||
value: 221
|
||||
},
|
||||
{
|
||||
country: 'Africa',
|
||||
year: '1999',
|
||||
value: 767
|
||||
},
|
||||
{
|
||||
country: 'Africa',
|
||||
year: '2050',
|
||||
value: 1766
|
||||
},
|
||||
{
|
||||
country: 'Europe',
|
||||
year: '1750',
|
||||
value: 163
|
||||
},
|
||||
{
|
||||
country: 'Europe',
|
||||
year: '1800',
|
||||
value: 203
|
||||
},
|
||||
{
|
||||
country: 'Europe',
|
||||
year: '1850',
|
||||
value: 276
|
||||
},
|
||||
{
|
||||
country: 'Europe',
|
||||
year: '1900',
|
||||
value: 408
|
||||
},
|
||||
{
|
||||
country: 'Europe',
|
||||
year: '1950',
|
||||
value: 547
|
||||
},
|
||||
{
|
||||
country: 'Europe',
|
||||
year: '1999',
|
||||
value: 729
|
||||
},
|
||||
{
|
||||
country: 'Europe',
|
||||
year: '2050',
|
||||
value: 628
|
||||
}
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const columnPlot = new Column('ZhuZhuangTu04', {
|
||||
data,
|
||||
xField: 'year',
|
||||
yField: 'value',
|
||||
seriesField: 'country',
|
||||
isPercent: true,
|
||||
isStack: true,
|
||||
label: {
|
||||
position: 'middle',
|
||||
content: (item) => {
|
||||
return item.value.toFixed(2)
|
||||
},
|
||||
style: {
|
||||
fill: '#fff'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
columnPlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<div id="ZiDanTu01"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Bullet } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{
|
||||
title: '满意度',
|
||||
ranges: [40, 70, 100],
|
||||
measures: [80],
|
||||
target: 85
|
||||
}
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const bulletPlot = new Bullet('ZiDanTu01', {
|
||||
data,
|
||||
measureField: 'measures',
|
||||
rangeField: 'ranges',
|
||||
targetField: 'target',
|
||||
xField: 'title',
|
||||
color: {
|
||||
range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
|
||||
measure: '#5B8FF9',
|
||||
target: '#39a3f4'
|
||||
},
|
||||
xAxis: {
|
||||
line: null
|
||||
},
|
||||
yAxis: false,
|
||||
label: {
|
||||
target: true
|
||||
},
|
||||
// 自定义 legend
|
||||
legend: {
|
||||
custom: true,
|
||||
position: 'bottom',
|
||||
items: [
|
||||
{
|
||||
value: '差',
|
||||
name: '差',
|
||||
marker: { symbol: 'square', style: { fill: '#FFbcb8', r: 5 } }
|
||||
},
|
||||
{
|
||||
value: '良',
|
||||
name: '良',
|
||||
marker: { symbol: 'square', style: { fill: '#FFe0b0', r: 5 } }
|
||||
},
|
||||
{
|
||||
value: '优',
|
||||
name: '优',
|
||||
marker: { symbol: 'square', style: { fill: '#bfeec8', r: 5 } }
|
||||
},
|
||||
{
|
||||
value: '实际值',
|
||||
name: '实际值',
|
||||
marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } }
|
||||
},
|
||||
{
|
||||
value: '目标值',
|
||||
name: '目标值',
|
||||
marker: { symbol: 'line', style: { stroke: '#39a3f4', r: 5 } }
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
bulletPlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<div id="ZiDanTu02"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { Bullet } from '@antv/g2plot'
|
||||
|
||||
const data = [
|
||||
{
|
||||
title: '重庆',
|
||||
ranges: [30, 90, 120],
|
||||
measures: [65],
|
||||
target: 80
|
||||
},
|
||||
{
|
||||
title: '杭州',
|
||||
ranges: [30, 90, 120],
|
||||
measures: [50],
|
||||
target: 100
|
||||
},
|
||||
{
|
||||
title: '广州',
|
||||
ranges: [30, 90, 120],
|
||||
measures: [40],
|
||||
target: 85
|
||||
},
|
||||
{
|
||||
title: '深圳',
|
||||
ranges: [30, 90, 120],
|
||||
measures: [50],
|
||||
target: 100
|
||||
}
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
const bulletPlot = new Bullet('ZiDanTu02', {
|
||||
data,
|
||||
measureField: 'measures',
|
||||
rangeField: 'ranges',
|
||||
targetField: 'target',
|
||||
xField: 'title',
|
||||
color: {
|
||||
range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
|
||||
measure: '#5B8FF9',
|
||||
target: '#39a3f4'
|
||||
},
|
||||
label: {
|
||||
measure: {
|
||||
position: 'middle',
|
||||
style: {
|
||||
fill: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
line: null
|
||||
},
|
||||
yAxis: false,
|
||||
// 自定义 legend
|
||||
legend: {
|
||||
custom: true,
|
||||
position: 'bottom',
|
||||
items: [
|
||||
{
|
||||
value: '差',
|
||||
name: '差',
|
||||
marker: { symbol: 'square', style: { fill: '#FFbcb8', r: 5 } }
|
||||
},
|
||||
{
|
||||
value: '良',
|
||||
name: '良',
|
||||
marker: { symbol: 'square', style: { fill: '#FFe0b0', r: 5 } }
|
||||
},
|
||||
{
|
||||
value: '优',
|
||||
name: '优',
|
||||
marker: { symbol: 'square', style: { fill: '#bfeec8', r: 5 } }
|
||||
},
|
||||
{
|
||||
value: '实际值',
|
||||
name: '实际值',
|
||||
marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } }
|
||||
},
|
||||
{
|
||||
value: '目标值',
|
||||
name: '目标值',
|
||||
marker: { symbol: 'line', style: { stroke: '#39a3f4', r: 5 } }
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
bulletPlot.render()
|
||||
})
|
||||
</script>
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="某站点用户Access From" :bordered="false">
|
||||
<RefererOfAWebsite class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="圆角环形图" :bordered="false">
|
||||
<DoughnutChartWithRoundedCorner class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="饼图自定义样式" :bordered="false">
|
||||
<CustomizedPie class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="基础南丁格尔玫瑰图" :bordered="false">
|
||||
<NightingaleChart class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="eCBingZhuangTu">
|
||||
import RefererOfAWebsite from '@/components/Chart/eCBingZhuangTu/RefererOfAWebsite.vue'
|
||||
import DoughnutChartWithRoundedCorner from '@/components/Chart/eCBingZhuangTu/DoughnutChartWithRoundedCorner.vue'
|
||||
import CustomizedPie from '@/components/Chart/eCBingZhuangTu/CustomizedPie.vue'
|
||||
import NightingaleChart from '@/components/Chart/eCBingZhuangTu/NightingaleChart.vue'
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="24">
|
||||
<a-card title="横条" :bordered="false">
|
||||
<h2>横条卡住了</h2>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="eCHengTiaoTu"></script>
|
||||
@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="基础K线图" :bordered="false">
|
||||
<basic-candlestick class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="上证指数" :bordered="false">
|
||||
<shang-hai-index class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<!--ec官网：https://echarts.apache.org/zh/index.html-->
|
||||
<!--可以看博客：https://blog.csdn.net/qq_41636947/article/details/110879791-->
|
||||
<script setup name="eCKXianTu">
|
||||
import BasicCandlestick from '@/components/Chart/eCKXianTu/BasicCandlestick.vue'
|
||||
import ShangHaiIndex from '@/components/Chart/eCKXianTu/ShangHaiIndex.vue'
|
||||
</script>
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="漏斗图" :bordered="false">
|
||||
<FunnelChart class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="漏斗图(对比)" :bordered="false">
|
||||
<FunnelCompare class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="漏斗图" :bordered="false">
|
||||
<CustomizedFunnel class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="Funnel" :bordered="false">
|
||||
<MultipleFunnels class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="eCLouDouTu">
|
||||
import FunnelChart from '@/components/Chart/eCLouDouTu/FunnelChart.vue'
|
||||
import FunnelCompare from '@/components/Chart/eCLouDouTu/FunnelCompare.vue'
|
||||
import CustomizedFunnel from '@/components/Chart/eCLouDouTu/CustomizedFunnel.vue'
|
||||
import MultipleFunnels from '@/components/Chart/eCLouDouTu/MultipleFunnels.vue'
|
||||
</script>
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="AQI 气泡图" :bordered="false">
|
||||
<ScatterAqiColor class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="基础散点图" :bordered="false">
|
||||
<BasicScatterChart class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="数据聚合" :bordered="false">
|
||||
<ClusteringProcess class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="涟漪特效散点图" :bordered="false">
|
||||
<EffectScatterChart class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="eCSanDianTu">
|
||||
import BasicScatterChart from '@/components/Chart/eCSanDianTu/BasicScatterChart.vue'
|
||||
import ClusteringProcess from '@/components/Chart/eCSanDianTu/ClusteringProcess.vue'
|
||||
import EffectScatterChart from '@/components/Chart/eCSanDianTu/EffectScatterChart.vue'
|
||||
import ScatterAqiColor from '@/components/Chart/eCSanDianTu/ScatterAqiColor.vue'
|
||||
</script>
|
||||
@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<a-card title="折线树图" :bordered="false">
|
||||
<TreeWithPolylineEdge style="height: 600px" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup name="eCShuXingTu">
|
||||
import TreeWithPolylineEdge from '@/components/Chart/eCShuXingTu/TreeWithPolylineEdge.vue'
|
||||
</script>
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="基础折线图" :bordered="false">
|
||||
<BasicLineChart class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="折线图堆叠" :bordered="false">
|
||||
<StackedLineChart class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="堆叠面积图" :bordered="false">
|
||||
<StackedAreaChart class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="阶梯折线图" :bordered="false">
|
||||
<StepLine class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="eCXianXingTu">
|
||||
import BasicLineChart from '@/components/Chart/eCXianXingTu/BasicLineChart.vue'
|
||||
import StackedLineChart from '@/components/Chart/eCXianXingTu/StackedLineChart.vue'
|
||||
import StackedAreaChart from '@/components/Chart/eCXianXingTu/StackedAreaChart.vue'
|
||||
import StepLine from '@/components/Chart/eCXianXingTu/StepLine.vue'
|
||||
</script>
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="基础仪表盘" :bordered="false">
|
||||
<GaugeBasicChart class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="阶段速度仪表盘" :bordered="false">
|
||||
<StageSpeedGauge class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="气温仪表盘" :bordered="false">
|
||||
<TemperatureGaugeChart class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="进度仪表盘" :bordered="false">
|
||||
<GrogressGauge class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="eCYiBiaoTu">
|
||||
import GaugeBasicChart from '@/components/Chart/eCYiBiaoTu/GaugeBasicChart.vue'
|
||||
import StageSpeedGauge from '@/components/Chart/eCYiBiaoTu/StageSpeedGauge.vue'
|
||||
import TemperatureGaugeChart from '@/components/Chart/eCYiBiaoTu/TemperatureGaugeChart.vue'
|
||||
import GrogressGauge from '@/components/Chart/eCYiBiaoTu/GrogressGauge.vue'
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="24">
|
||||
<a-card title="折柱" :bordered="false">
|
||||
<h2>折柱也卡住了</h2>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="eCZheZhuTu"></script>
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="基础柱状图" :bordered="false">
|
||||
<BasicBar class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="柱状图标签旋转" :bordered="false">
|
||||
<BarLabelRotation class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="交错正负轴标签" :bordered="false">
|
||||
<BarChartWithNegativeValue class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="水印 - ECharts 下载统计" :bordered="false">
|
||||
<WatermarkEChartsDownload class="xn-ht400" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="eCZhuZhuangTu">
|
||||
import BasicBar from '@/components/Chart/eCZhuZhuangTu/BasicBar.vue'
|
||||
import BarLabelRotation from '@/components/Chart/eCZhuZhuangTu/BarLabelRotation.vue'
|
||||
import BarChartWithNegativeValue from '@/components/Chart/eCZhuZhuangTu/BarChartWithNegativeValue.vue'
|
||||
import WatermarkEChartsDownload from '@/components/Chart/eCZhuZhuangTu/WatermarkEChartsDownload.vue'
|
||||
</script>
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="基础饼图" :bordered="false">
|
||||
<BingZhuangTu01 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="饼图-蜘蛛布局标签" :bordered="false">
|
||||
<BingZhuangTu02 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="基础环图" :bordered="false">
|
||||
<BingZhuangTu03 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="环图统计指标卡" :bordered="false">
|
||||
<BingZhuangTu04 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="g2BingZhuangTu"></script>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="基础词云图" :bordered="false">
|
||||
<CiYunTu01 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="词云图-每次渲染保持位置不变" :bordered="false">
|
||||
<CiYunTu02 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="g2CiYunTu"></script>
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="仪表盘（多色）" :bordered="false">
|
||||
<JinDuTu01 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="水波图" :bordered="false">
|
||||
<JinDuTu02 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="渐变仪表盘" :bordered="false">
|
||||
<JinDuTu03 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="样式自定义的水波图" :bordered="false">
|
||||
<JinDuTu04 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="g2JinDuTu"></script>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="基础漏斗图" :bordered="false">
|
||||
<LouDouTu01 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="对比漏斗图" :bordered="false">
|
||||
<LouDouTu02 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="g2LouDouTu"></script>
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="基础面积图" :bordered="false">
|
||||
<MianJiTu01 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="渐变色面积图" :bordered="false">
|
||||
<MianJiTu02 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="堆叠面积图" :bordered="false">
|
||||
<MianJiTu03 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="百分比堆叠面积图" :bordered="false">
|
||||
<MianJiTu04 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="g2MianJiTu"></script>
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="散点图颜色映射" :bordered="false">
|
||||
<SanDianTu01 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="伪 3D 气泡图" :bordered="false">
|
||||
<SanDianTu02 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="散点图图形标签" :bordered="false">
|
||||
<SanDianTu03 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="气泡图-自定义tooltip" :bordered="false">
|
||||
<SanDianTu04 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="g2SanDianTu"></script>
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="基础条形图" :bordered="false">
|
||||
<TiaoXingTu01 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="堆叠条形图" :bordered="false">
|
||||
<TiaoXingTu02 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="分组条形图" :bordered="false">
|
||||
<TiaoXingTu03 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="区间条形图" :bordered="false">
|
||||
<TiaoXingTu04 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="g2TiaoXingTu"></script>
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="基础折线图" :bordered="false">
|
||||
<ZheXianTu01 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="多折线图-二氧化碳排放量来源" :bordered="false">
|
||||
<ZheXianTu02 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="阶梯折线图" :bordered="false">
|
||||
<ZheXianTu03 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="多指标折线图" :bordered="false">
|
||||
<ZheXianTu04 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="g2ZheXianTu"></script>
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="基础柱状图" :bordered="false">
|
||||
<ZhuZhuangTu01 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="堆叠柱状图" :bordered="false">
|
||||
<ZhuZhuangTu02 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="分组柱状图" :bordered="false">
|
||||
<ZhuZhuangTu03 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="分组柱状图" :bordered="false">
|
||||
<ZhuZhuangTu04 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="g2ZhuZhuangTu"></script>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="[10, 10]">
|
||||
<a-col :span="12">
|
||||
<a-card title="子弹图" :bordered="false">
|
||||
<ZiDanTu01 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="多组子弹图" :bordered="false">
|
||||
<ZiDanTu02 />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup name="g2ZiDanTu"></script>
|
||||
@ -1155,24 +1155,6 @@ INSERT INTO `SYS_RELATION` VALUES ('1728455598281166852', '1570687866138206208',
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598281166853', '1570687866138206208', '1548901111999773326', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773326\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598281166854', '1570687866138206208', '1548901111999773254', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773254\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598281166855', '1570687866138206208', '1548901111999773427', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773427\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598281166856', '1570687866138206208', '1548901111999773428', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773428\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598281166857', '1570687866138206208', '1548901111999773429', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773429\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598281166858', '1570687866138206208', '1548901111999773430', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773430\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598281166859', '1570687866138206208', '1548901111999773431', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773431\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555457', '1570687866138206208', '1548901111999773432', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773432\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555458', '1570687866138206208', '1548901111999773433', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773433\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555459', '1570687866138206208', '1548901111999773434', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773434\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555460', '1570687866138206208', '1548901111999773435', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773435\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555461', '1570687866138206208', '1548901111999773436', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773436\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555462', '1570687866138206208', '1548901111999773437', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773437\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555463', '1570687866138206208', '1548901111999773438', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773438\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555464', '1570687866138206208', '1548901111999773439', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773439\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555465', '1570687866138206208', '1548901111999773440', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773440\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555466', '1570687866138206208', '1548901111999773441', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773441\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555467', '1570687866138206208', '1548901111999773442', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773442\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555468', '1570687866138206208', '1548901111999773443', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773443\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555469', '1570687866138206208', '1548901111999773444', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773444\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555470', '1570687866138206208', '1548901111999773445', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1548901111999773445\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555471', '1570687866138206208', '1689894316554067969', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1689894316554067969\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555472', '1570687866138206208', '1689894577238450177', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1689894577238450177\",\"buttonInfo\":[]}');
|
||||
INSERT INTO `SYS_RELATION` VALUES ('1728455598289555473', '1570687866138206208', '1623378675591671810', 'SYS_ROLE_HAS_RESOURCE', '{\"menuId\":\"1623378675591671810\",\"buttonInfo\":[]}');
|
||||
@ -1260,24 +1242,6 @@ INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773254', '1548901111999773250',
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773326', '1548901111999773126', '操作日志', 'devOplog', '4jbjjrz8h7', 'MENU', '1548901111999770525', 'MENU', '/dev/oplog', 'dev/log/oplog/index', 'bars-outlined', NULL, NULL, NULL, NULL, 29, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773426', '0', '开发示例', NULL, 'kyd5idwiwr', 'MENU', '1548901111999770525', 'CATALOG', '/e2re4evf5y', NULL, 'project-outlined', NULL, NULL, NULL, NULL, 30, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773427', '1548901111999773426', '图标选择', 'tuBiaoXuanZe', '97ygt0hy8t', 'MENU', '1548901111999770525', 'MENU', '/exm/iconSelect', 'exm/iconSelect/index', 'appstore-outlined', NULL, NULL, NULL, NULL, 31, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773428', '1548901111999773426', 'ECK线图', 'eCKXianTu', '7voetv0mru', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/eCKXianTu', 'exm/chart/eCKXianTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 32, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773429', '1548901111999773426', 'EC仪表图', 'eCYiBiaoTu', 'c4uor9wg1b', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/eCYiBiaoTu', 'exm/chart/eCYiBiaoTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 33, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773430', '1548901111999773426', 'EC散点图', 'eCSanDianTu', '6r6ti8izxi', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/eCSanDianTu', 'exm/chart/eCSanDianTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 34, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773431', '1548901111999773426', 'EC柱状图', 'eCZhuZhuangTu', 's3ft1ri9qz', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/eCZhuZhuangTu', 'exm/chart/eCZhuZhuangTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 35, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773432', '1548901111999773426', 'EC树形图', 'eCShuXingTu', '63lz6owubp', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/eCShuXingTu', 'exm/chart/eCShuXingTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 36, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773433', '1548901111999773426', 'EC漏斗图', 'eCLouDouTu', 'd46vov3j2d', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/eCLouDouTu', 'exm/chart/eCLouDouTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 37, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773434', '1548901111999773426', 'EC线形图', 'eCXianXingTu', 'dgp8hclhlr', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/eCXianXingTu', 'exm/chart/eCXianXingTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 38, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773435', '1548901111999773426', 'EC饼状图', 'eCBingZhuangTu', '2y1g7u2p1k', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/eCBingZhuangTu', 'exm/chart/eCBingZhuangTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 39, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773436', '1548901111999773426', 'G2进度图', 'g2JinDuTu', '8vvhyctv2w', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/g2JinDuTu', 'exm/chart/g2JinDuTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 40, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773437', '1548901111999773426', 'G2子弹图', 'g2ZiDanTu', '3lgc3ci5f3', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/g2ZiDanTu', 'exm/chart/g2ZiDanTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 41, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773438', '1548901111999773426', 'G2散点图', 'g2SanDianTu', 'e22qm4b30d', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/g2SanDianTu', 'exm/chart/g2SanDianTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 42, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773439', '1548901111999773426', 'G2柱状图', 'g2ZhuZhuangTu', '92huf33fcf', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/g2ZhuZhuangTu', 'exm/chart/g2ZhuZhuangTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 43, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773440', '1548901111999773426', 'G2漏斗图', 'g2LouDouTu', '7w3gnlts80', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/g2LouDouTu', 'exm/chart/g2LouDouTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 44, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773441', '1548901111999773426', 'G2折线图', 'g2ZheXianTu', '4g3gr90z1i', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/g2ZheXianTu', 'exm/chart/g2ZheXianTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 45, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773442', '1548901111999773426', 'G2词云图', 'g2CiYunTu', 'atpbicf8em', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/g2CiYunTu', 'exm/chart/g2CiYunTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 46, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773443', '1548901111999773426', 'G2面积图', 'g2MianJiTu', 'm5lnxo3d56', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/g2MianJiTu', 'exm/chart/g2MianJiTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 47, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773444', '1548901111999773426', 'G2饼状图', 'g2BingZhuangTu', 'tmn482a18x', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/g2BingZhuangTu', 'exm/chart/g2BingZhuangTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 48, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773445', '1548901111999773426', 'G2条形图', 'g2TiaoXingTu', 'aej0gwpe43', 'MENU', '1548901111999770525', 'MENU', '/exm/chart/g2TiaoXingTu', 'exm/chart/g2TiaoXingTu', 'appstore-outlined', NULL, NULL, NULL, NULL, 49, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773976', NULL, '业务', NULL, 'biz', 'MODULE', NULL, NULL, NULL, NULL, 'profile-outlined', '#d81b43', NULL, NULL, NULL, 50, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773977', '0', '公司架构', NULL, '3xavzjxt5z', 'MENU', '1548901111999773976', 'CATALOG', '/1nlpdpnief', NULL, 'cluster-outlined', NULL, NULL, NULL, NULL, 51, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
INSERT INTO `SYS_RESOURCE` VALUES ('1548901111999773978', '1548901111999773977', '机构管理', 'bizOrg', 'mnt1f21q40', 'MENU', '1548901111999773976', 'MENU', '/biz/org', 'biz/org/index', 'cluster-outlined', NULL, NULL, NULL, NULL, 52, NULL, 'NOT_DELETE', NULL, NULL, NULL, NULL);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user