w-component-vue
Version:
A simple component for vue(vue2).
1,814 lines • 51.4 kB
HTML
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>w-component-vue</title>
<!-- @babel/polyfill -->
<script
nomodule
src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
></script>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<!-- extractHtml已自動添加@babel/polyfill與vue -->
<!-- vuetify -->
<link
href="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.css"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.js"
></script>
<!-- fontawesome -->
<link
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
rel="stylesheet"
/>
<!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<!-- google, 各組件使用mdi/js故不需引用 -->
<link
_href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
rel="stylesheet"
/>
<link
_href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet"
/>
<!-- data -->
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataAAPL.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataUSD2EUR.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataTemperature.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataHousePriceArea.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataFlare.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataRain.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataRainClip.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataCivilSoilCodeIcon.js"
></script>
<!-- w-component-vue -->
<script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.4.41/dist/w-component-vue.umd.js"></script>
<style>
.v-application--wrap {
/* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
width: 100svw;
max-width: 100svw;
font-family: inherit;
background: #fff;
}
/* 組件所須全域樣式 */
.item {
/* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
border-left: 3px solid #ffba75;
margin: 5px 5px 8px 0px;
padding: 3px 3px 5px 10px;
font-size: 0.9rem;
display: flex;
justify-content: flex-start;
align-items: center;
}
.head1 {
padding: 0px 0px 20px 0px;
font-size: 2.5rem;
}
.bkh {
/* 寬 */
padding: 20px;
}
@media screen and (max-width: 800px) {
/* 中 */
.bkh {
padding: 10px;
}
}
@media screen and (max-width: 400px) {
/* 窄 */
.bkh {
padding: 5px;
}
}
.bk {
/* 寬 */
display: inline-block;
vertical-align: top;
padding: 0px 80px 60px 0px;
}
@media screen and (max-width: 1000px) {
/* 中窄 */
.bk {
display: block;
padding: 0px 0px 50px 0px;
}
}
.cpitem {
transition: all 0.3s;
padding: 5px 15px;
cursor: pointer;
}
.cpitem-white {
background: #fff;
}
.cpitem-white:hover {
background: #eee;
}
.cpitem-black {
background: #333;
}
.cpitem-black:hover {
background: #555;
}
</style>
</head>
<body
style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
>
<v-app id="app" class="bkh" style="font-family:inherit;">
<div class="head1">
<span
style="cursor:pointer;"
title="open for copy link to view component"
onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
>w-echarts-vue-dyn</span>
</div>
<div class="bk">
<div class="item">area</div>
<w-echarts-vue-dyn
style="width:620px; height:300px;"
:options="WEchartsVueDyn.options2"
></w-echarts-vue-dyn>
</div>
</v-app>
<script>
//install
Vue.use(window["w-component-vue"]);
//initialize
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: function() {
let df = function(d) {
let date = [];
let data = [];
for (let i = 0; i < d.length; i++) {
let v = d[i];
let now = new Date(v[0]);
let t = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join(
"-"
);
date.push(t);
data.push(v[1]);
}
return {
date,
data
};
};
let rDataAAPL = df(window.dataAAPL);
let rDataUSD2EUR = df(window.dataUSD2EUR);
return {
WEchartsVueDyn: {
widthOptions1: 620,
options1: {
tooltip: {
trigger: "axis",
position: function(pt) {
return [pt[0], "10%"];
}
},
title: {
left: "center",
text: "AAPL Stock Price"
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: "none",
title: {
zoom: "Zoom",
back: "Zoom Reset"
}
},
restore: {
title: "Restore"
},
saveAsImage: {
title: "Download"
}
}
},
xAxis: {
type: "category",
boundaryGap: false,
data: rDataAAPL.date
},
yAxis: {
type: "value",
boundaryGap: [0, "100%"]
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100
},
{
start: 0,
end: 10,
handleIcon:
"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
handleSize: "80%",
handleStyle: {
color: "#fff",
shadowBlur: 3,
shadowColor: "rgba(0, 0, 0, 0.6)",
shadowOffsetX: 2,
shadowOffsetY: 2
}
}
],
series: [
{
name: "Price",
type: "line",
itemStyle: {
color: "rgba(20, 20, 200, 0.5)"
},
data: rDataAAPL.data
}
]
},
options2: {
tooltip: {
trigger: "axis",
position: function(pt) {
return [pt[0], "10%"];
}
},
title: {
left: "center",
text: "USD to EUR exchange rate over time"
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: "none",
title: {
zoom: "Zoom",
back: "Zoom Reset"
}
},
restore: {
title: "Restore"
},
saveAsImage: {
title: "Download"
}
}
},
xAxis: {
type: "category",
boundaryGap: false,
data: rDataUSD2EUR.date
},
yAxis: {
type: "value",
boundaryGap: [0, "100%"]
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100
},
{
start: 0,
end: 10,
handleIcon:
"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
handleSize: "80%",
handleStyle: {
color: "#fff",
shadowBlur: 3,
shadowColor: "rgba(0, 0, 0, 0.6)",
shadowOffsetX: 2,
shadowOffsetY: 2
}
}
],
series: [
{
name: "USD to EUR",
type: "line",
// smooth: true,
// symbol: 'none',
// sampling: 'average',
itemStyle: {
color: "rgba(200,200,255,1)"
},
areaStyle: {
color: {
type: "linear",
x0: 0,
y0: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(200,200,255,1)"
},
{
offset: 1,
color: "rgba(200,200,255,0.1)"
}
],
globalCoord: false
}
},
data: rDataUSD2EUR.data
}
]
},
options3: {
title: {
left: "center",
text: "堆叠区域图"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985"
}
}
},
legend: {
y: 30,
data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "邮件营销",
type: "line",
stack: "总量",
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: "联盟广告",
type: "line",
stack: "总量",
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: "视频广告",
type: "line",
stack: "总量",
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: "直接访问",
type: "line",
stack: "总量",
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: "搜索引擎",
type: "line",
stack: "总量",
label: {
normal: {
show: true,
position: "top"
}
},
areaStyle: {},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
},
options4: {
title: {
left: "center",
text: "基础雷达图"
},
tooltip: {},
legend: {
y: 30,
data: [
"预算分配（Allocated Budget）",
"实际开销（Actual Spending）"
]
},
radar: {
// shape: 'circle',
center: ["50%", "60%"],
radius: "60%",
name: {
textStyle: {
color: "#fff",
backgroundColor: "#999",
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: "销售（sales）", max: 6500 },
{ name: "管理（Administration）", max: 16000 },
{ name: "信息技术（Information Techology）", max: 30000 },
{ name: "客服（Customer Support）", max: 38000 },
{ name: "研发（Development）", max: 52000 },
{ name: "市场（Marketing）", max: 25000 }
]
},
series: [
{
name: "预算 vs 开销（Budget vs spending）",
type: "radar",
// areaStyle: {normal: {}},
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: "预算分配（Allocated Budget）"
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: "实际开销（Actual Spending）"
}
]
}
]
},
options5: {
title: {
// left: 'center',
text: "极坐标双数值轴"
},
legend: {
// y: 30,
data: ["line"]
},
polar: {
center: ["50%", "52%"],
radius: "72%"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross"
}
},
angleAxis: {
type: "value",
startAngle: 0
},
radiusAxis: {},
series: [
{
coordinateSystem: "polar",
name: "line",
type: "line",
data: (function() {
let data = [];
for (let i = 0; i <= 100; i++) {
let theta = (i / 100) * 360;
let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
data.push([r, theta]);
}
return data;
})()
}
]
},
options6: {
tooltip: {
position: "top"
},
grid: {
height: "70%",
top: "2%"
},
xAxis: {
type: "category",
data: [
"12a",
"1a",
"2a",
"3a",
"4a",
"5a",
"6a",
"7a",
"8a",
"9a",
"10a",
"11a",
"12p",
"1p",
"2p",
"3p",
"4p",
"5p",
"6p",
"7p",
"8p",
"9p",
"10p",
"11p"
],
splitArea: {
show: true
}
},
yAxis: {
type: "category",
data: [
"Saturday",
"Friday",
"Thursday",
"Wednesday",
"Tuesday",
"Monday",
"Sunday"
],
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: "horizontal",
left: "center",
bottom: "2%"
},
series: [
{
name: "Punch Card",
type: "heatmap",
data: [
[0, 0, 5],
[0, 1, 1],
[0, 2, 0],
[0, 3, 0],
[0, 4, 0],
[0, 5, 0],
[0, 6, 0],
[0, 7, 0],
[0, 8, 0],
[0, 9, 0],
[0, 10, 0],
[0, 11, 2],
[0, 12, 4],
[0, 13, 1],
[0, 14, 1],
[0, 15, 3],
[0, 16, 4],
[0, 17, 6],
[0, 18, 4],
[0, 19, 4],
[0, 20, 3],
[0, 21, 3],
[0, 22, 2],
[0, 23, 5],
[1, 0, 7],
[1, 1, 0],
[1, 2, 0],
[1, 3, 0],
[1, 4, 0],
[1, 5, 0],
[1, 6, 0],
[1, 7, 0],
[1, 8, 0],
[1, 9, 0],
[1, 10, 5],
[1, 11, 2],
[1, 12, 2],
[1, 13, 6],
[1, 14, 9],
[1, 15, 11],
[1, 16, 6],
[1, 17, 7],
[1, 18, 8],
[1, 19, 12],
[1, 20, 5],
[1, 21, 5],
[1, 22, 7],
[1, 23, 2],
[2, 0, 1],
[2, 1, 1],
[2, 2, 0],
[2, 3, 0],
[2, 4, 0],
[2, 5, 0],
[2, 6, 0],
[2, 7, 0],
[2, 8, 0],
[2, 9, 0],
[2, 10, 3],
[2, 11, 2],
[2, 12, 1],
[2, 13, 9],
[2, 14, 8],
[2, 15, 10],
[2, 16, 6],
[2, 17, 5],
[2, 18, 5],
[2, 19, 5],
[2, 20, 7],
[2, 21, 4],
[2, 22, 2],
[2, 23, 4],
[3, 0, 7],
[3, 1, 3],
[3, 2, 0],
[3, 3, 0],
[3, 4, 0],
[3, 5, 0],
[3, 6, 0],
[3, 7, 0],
[3, 8, 1],
[3, 9, 0],
[3, 10, 5],
[3, 11, 4],
[3, 12, 7],
[3, 13, 14],
[3, 14, 13],
[3, 15, 12],
[3, 16, 9],
[3, 17, 5],
[3, 18, 5],
[3, 19, 10],
[3, 20, 6],
[3, 21, 4],
[3, 22, 4],
[3, 23, 1],
[4, 0, 1],
[4, 1, 3],
[4, 2, 0],
[4, 3, 0],
[4, 4, 0],
[4, 5, 1],
[4, 6, 0],
[4, 7, 0],
[4, 8, 0],
[4, 9, 2],
[4, 10, 4],
[4, 11, 4],
[4, 12, 2],
[4, 13, 4],
[4, 14, 4],
[4, 15, 14],
[4, 16, 12],
[4, 17, 1],
[4, 18, 8],
[4, 19, 5],
[4, 20, 3],
[4, 21, 7],
[4, 22, 3],
[4, 23, 0],
[5, 0, 2],
[5, 1, 1],
[5, 2, 0],
[5, 3, 3],
[5, 4, 0],
[5, 5, 0],
[5, 6, 0],
[5, 7, 0],
[5, 8, 2],
[5, 9, 0],
[5, 10, 4],
[5, 11, 1],
[5, 12, 5],
[5, 13, 10],
[5, 14, 5],
[5, 15, 7],
[5, 16, 11],
[5, 17, 6],
[5, 18, 0],
[5, 19, 5],
[5, 20, 3],
[5, 21, 4],
[5, 22, 2],
[5, 23, 0],
[6, 0, 1],
[6, 1, 0],
[6, 2, 0],
[6, 3, 0],
[6, 4, 0],
[6, 5, 0],
[6, 6, 0],
[6, 7, 0],
[6, 8, 0],
[6, 9, 0],
[6, 10, 1],
[6, 11, 0],
[6, 12, 2],
[6, 13, 1],
[6, 14, 3],
[6, 15, 4],
[6, 16, 0],
[6, 17, 0],
[6, 18, 0],
[6, 19, 0],
[6, 20, 1],
[6, 21, 2],
[6, 22, 2],
[6, 23, 6]
].map(function(item) {
return [item[1], item[0], item[2] || "-"];
}),
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
},
options7: {
title: {
left: "center",
text: "Dispersion of house price based on the area"
},
grid: {
top: "10%",
left: "0%",
right: "10%",
bottom: "0%",
containLabel: true
},
visualMap: {
min: 15202,
max: 159980,
dimension: 1,
orient: "vertical",
right: 10,
top: "center",
text: ["HIGH", "LOW"],
calculable: true,
inRange: {
color: ["#f2c31a", "#24b7f2"]
}
},
tooltip: {
trigger: "item",
axisPointer: {
type: "cross"
}
},
xAxis: [
{
type: "value"
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "price-area",
type: "scatter",
symbolSize: 5,
itemStyle: {
normal: {
borderWidth: 0.2,
borderColor: "#fff"
}
},
data: window.dataHousePriceArea
}
]
},
options8: {
parallelAxis: [
{ dim: 0, name: "Price" },
{ dim: 1, name: "Net Weight" },
{ dim: 2, name: "Amount" },
{
dim: 3,
name: "Score",
type: "category",
data: ["Excellent", "Good", "OK", "Bad"]
}
],
parallel: {
left: "5%",
right: "10%",
bottom: "5%",
top: "5%"
// parallelAxisDefault: {
// type: 'value',
// nameLocation: 'end',
// nameGap: 20
// }
},
series: {
type: "parallel",
lineStyle: {
width: 4
},
data: [
[12.99, 100, 82, "Good"],
[9.99, 80, 77, "OK"],
[20, 120, 60, "Excellent"]
]
}
},
options9: {
tooltip: {
trigger: "item",
triggerOn: "mousemove"
},
toolbox: {
feature: {
restore: {
title: "Restore"
},
saveAsImage: {
title: "Download"
}
}
},
series: [
{
type: "tree",
//orient: 'vertical',
data: [window.dataFlare],
top: "1%",
left: "4%",
bottom: "1%",
right: "14%",
//top: '4%',
//left: '1%',
//bottom: '14%',
//right: '1%',
symbolSize: 12,
initialTreeDepth: undefined, //展開全部
label: {
position: "left",
//position: 'top',
verticalAlign: "middle",
align: "right",
fontSize: 12,
//rotate: -90,
formatter: function(p) {
if (p.value) {
return p.name + ": " + p.value;
}
return p.name;
}
},
leaves: {
label: {
position: "right",
//position: 'bottom',
verticalAlign: "middle",
align: "left"
//rotate: -90,
//formatter: '{b}: {c}',
}
},
animationDuration: 500,
animationDurationUpdate: 500
}
]
},
options10: {
tooltip: {
trigger: "item",
triggerOn: "mousemove"
},
toolbox: {
feature: {
restore: {
title: "Restore"
},
saveAsImage: {
title: "Download"
}
}
},
series: [
{
type: "treemap",
name: window.dataFlare.name,
data: window.dataFlare.children,
upperLabel: {
show: true,
height: 24,
padding: 5
},
label: {
formatter: function(p) {
if (p.value) {
return p.name + "\n" + "(" + p.value + ")";
}
return p.name;
},
fontSize: 11
},
levels: [
{
itemStyle: {
borderWidth: 2,
gapWidth: 2,
borderColor: "#444"
//borderColorSaturation: 0.2,
}
},
{
itemStyle: {
borderWidth: 2,
gapWidth: 2,
borderColor: "#666"
//borderColorSaturation: 0.7,
}
},
{
itemStyle: {
borderWidth: 2,
gapWidth: 2,
borderColor: "#888"
//borderColorSaturation: 0.4,
}
},
{
itemStyle: {
borderWidth: 2,
gapWidth: 2,
borderColor: "#aaa"
//borderColorSaturation: 0.4,
}
}
]
}
]
},
options11: {
// legend: {
// data: ['Punch Card']
// },
tooltip: {},
visualMap: {
type: "continuous",
min: 0,
max: 10,
inRange: {
color: ["#2D5F73", "#538EA6", "#F2D1B3", "#F2B8A2", "#F28C8C"]
},
orient: "vertical",
top: "center"
},
series: {
type: "sunburst",
data: [
{
name: "Grandpa",
children: [
{
name: "Uncle Leo",
value: 15,
children: [
{
name: "Cousin Jack",
value: 2
},
{
name: "Cousin Mary",
value: 5,
children: [
{
name: "Jackson",
value: 2
}
]
},
{
name: "Cousin Ben",
value: 4
}
]
},
{
name: "Aunt Jane",
children: [
{
name: "Cousin Kate",
value: 4
}
]
},
{
name: "Father",
value: 10,
children: [
{
name: "Me",
value: 5,
itemStyle: {
color: "red"
}
},
{
name: "Brother Peter",
value: 1
}
]
}
]
},
{
name: "Mike",
children: [
{
name: "Uncle Dan",
children: [
{
name: "Cousin Lucy",
value: 3
},
{
name: "Cousin Luck",
value: 4,
children: [
{
name: "Nephew",
value: 2
}
]
}
]
}
]
},
{
name: "Nancy",
children: [
{
name: "Uncle Nike",
children: [
{
name: "Cousin Betty",
value: 1
},
{
name: "Cousin Jenny",
value: 2
}
]
}
]
}
],
radius: [0, "90%"],
label: {
rotate: "radial"
}
}
},
options12: {
legend: {
data: ["Punch Card"]
},
polar: {},
tooltip: {},
visualMap: {
type: "continuous",
min: 0,
max: 14,
top: "middle",
dimension: 2,
calculable: true
},
angleAxis: {
type: "category",
data: [
"12a",
"1a",
"2a",
"3a",
"4a",
"5a",
"6a",
"7a",
"8a",
"9a",
"10a",
"11a",
"12p",
"1p",
"2p",
"3p",
"4p",
"5p",
"6p",
"7p",
"8p",
"9p",
"10p",
"11p"
],
boundaryGap: false,
splitLine: {
show: true,
lineStyle: {
color: "#ddd",
type: "dashed"
}
},
axisLine: {
show: false
}
},
radiusAxis: {
type: "category",
data: [
"Saturday",
"Friday",
"Thursday",
"Wednesday",
"Tuesday",
"Monday",
"Sunday"
],
z: 100
},
series: [
{
name: "Punch Card",
type: "custom",
coordinateSystem: "polar",
itemStyle: {
color: "#d14a61"
},
renderItem: function(params, api) {
let values = [api.value(0), api.value(1)];
let coord = api.coord(values);
let size = api.size([1, 1], values);
return {
type: "sector",
shape: {
cx: params.coordSys.cx,
cy: params.coordSys.cy,
r0: coord[2] - size[0] / 2,
r: coord[2] + size[0] / 2,
startAngle: -(coord[3] + size[1] / 2),
endAngle: -(coord[3] - size[1] / 2)
},
style: api.style({
fill: api.visual("color")
})
};
},
data: [
[0, 0, 5],
[0, 1, 1],
[0, 2, 0],
[0, 3, 0],
[0, 4, 0],
[0, 5, 0],
[0, 6, 0],
[0, 7, 0],
[0, 8, 0],
[0, 9, 0],
[0, 10, 0],
[0, 11, 2],
[0, 12, 4],
[0, 13, 1],
[0, 14, 1],
[0, 15, 3],
[0, 16, 4],
[0, 17, 6],
[0, 18, 4],
[0, 19, 4],
[0, 20, 3],
[0, 21, 3],
[0, 22, 2],
[0, 23, 5],
[1, 0, 7],
[1, 1, 0],
[1, 2, 0],
[1, 3, 0],
[1, 4, 0],
[1, 5, 0],
[1, 6, 0],
[1, 7, 0],
[1, 8, 0],
[1, 9, 0],
[1, 10, 5],
[1, 11, 2],
[1, 12, 2],
[1, 13, 6],
[1, 14, 9],
[1, 15, 11],
[1, 16, 6],
[1, 17, 7],
[1, 18, 8],
[1, 19, 12],
[1, 20, 5],
[1, 21, 5],
[1, 22, 7],
[1, 23, 2],
[2, 0, 1],
[2, 1, 1],
[2, 2, 0],
[2, 3, 0],
[2, 4, 0],
[2, 5, 0],
[2, 6, 0],
[2, 7, 0],
[2, 8, 0],
[2, 9, 0],
[2, 10, 3],
[2, 11, 2],
[2, 12, 1],
[2, 13, 9],
[2, 14, 8],
[2, 15, 10],
[2, 16, 6],
[2, 17, 5],
[2, 18, 5],
[2, 19, 5],
[2, 20, 7],
[2, 21, 4],
[2, 22, 2],
[2, 23, 4],
[3, 0, 7],
[3, 1, 3],
[3, 2, 0],
[3, 3, 0],
[3, 4, 0],
[3, 5, 0],
[3, 6, 0],
[3, 7, 0],
[3, 8, 1],
[3, 9, 0],
[3, 10, 5],
[3, 11, 4],
[3, 12, 7],
[3, 13, 14],
[3, 14, 13],
[3, 15, 12],
[3, 16, 9],
[3, 17, 5],
[3, 18, 5],
[3, 19, 10],
[3, 20, 6],
[3, 21, 4],
[3, 22, 4],
[3, 23, 1],
[4, 0, 1],
[4, 1, 3],
[4, 2, 0],
[4, 3, 0],
[4, 4, 0],
[4, 5, 1],
[4, 6, 0],
[4, 7, 0],
[4, 8, 0],
[4, 9, 2],
[4, 10, 4],
[4, 11, 4],
[4, 12, 2],
[4, 13, 4],
[4, 14, 4],
[4, 15, 14],
[4, 16, 12],
[4, 17, 1],
[4, 18, 8],
[4, 19, 5],
[4, 20, 3],
[4, 21, 7],
[4, 22, 3],
[4, 23, 0],
[5, 0, 2],
[5, 1, 1],
[5, 2, 0],
[5, 3, 3],
[5, 4, 0],
[5, 5, 0],
[5, 6, 0],
[5, 7, 0],
[5, 8, 2],
[5, 9, 0],
[5, 10, 4],
[5, 11, 1],
[5, 12, 5],
[5, 13, 10],
[5, 14, 5],
[5, 15, 7],
[5, 16, 11],
[5, 17, 6],
[5, 18, 0],
[5, 19, 5],
[5, 20, 3],
[5, 21, 4],
[5, 22, 2],
[5, 23, 0],
[6, 0, 1],
[6, 1, 0],
[6, 2, 0],
[6, 3, 0],
[6, 4, 0],
[6, 5, 0],
[6, 6, 0],
[6, 7, 0],
[6, 8, 0],
[6, 9, 0],
[6, 10, 1],
[6, 11, 0],
[6, 12, 2],
[6, 13, 1],
[6, 14, 3],
[6, 15, 4],
[6, 16, 0],
[6, 17, 0],
[6, 18, 0],
[6, 19, 0],
[6, 20, 1],
[6, 21, 2],
[6, 22, 2],
[6, 23, 6]
]
}
]
},
options13: {
tooltip: {},
visualMap: {
max: 20,
inRange: {
color: [
"#313695",
"#4575b4",
"#74add1",
"#abd9e9",
"#e0f3f8",
"#ffffbf",
"#fee090",
"#fdae61",
"#f46d43",
"#d73027",
"#a50026"
]
}
},
xAxis3D: {
type: "category",
data: [
"12a",
"1a",
"2a",
"3a",
"4a",
"5a",
"6a",
"7a",
"8a",
"9a",
"10a",
"11a",
"12p",
"1p",
"2p",
"3p",
"4p",
"5p",
"6p",
"7p",
"8p",
"9p",
"10p",
"11p"
]
},
yAxis3D: {
type: "category",
data: [
"Saturday",
"Friday",
"Thursday",
"Wednesday",
"Tuesday",
"Monday",
"Sunday"
]
},
zAxis3D: {
type: "value"
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
light: {
main: {
intensity: 1.2
},
ambient: {
intensity: 0.3
}
}
},
series: [
{
type: "bar3D",
data: [
[0, 0, 5],
[0, 1, 1],
[0, 2, 0],
[0, 3, 0],
[0, 4, 0],
[0, 5, 0],
[0, 6, 0],
[0, 7, 0],
[0, 8, 0],
[0, 9, 0],
[0, 10, 0],
[0, 11, 2],
[0, 12, 4],
[0, 13, 1],
[0, 14, 1],
[0, 15, 3],
[0, 16, 4],
[0, 17, 6],
[0, 18, 4],
[0, 19, 4],
[0, 20, 3],
[0, 21, 3],
[0, 22, 2],
[0, 23, 5],
[1, 0, 7],
[1, 1, 0],
[1, 2, 0],
[1, 3, 0],
[1, 4, 0],
[1, 5, 0],
[1, 6, 0],
[1, 7, 0],
[1, 8, 0],
[1, 9, 0],
[1, 10, 5],
[1, 11, 2],
[1, 12, 2],
[1, 13, 6],
[1, 14, 9],
[1, 15, 11],
[1, 16, 6],
[1, 17, 7],
[1, 18, 8],
[1, 19, 12],
[1, 20, 5],
[1, 21, 5],
[1, 22, 7],
[1, 23, 2],
[2, 0, 1],
[2, 1, 1],
[2, 2, 0],
[2, 3, 0],
[2, 4, 0],
[2, 5, 0],
[2, 6, 0],
[2, 7, 0],
[2, 8, 0],
[2, 9, 0],
[2, 10, 3],
[2, 11, 2],
[2, 12, 1],
[2, 13, 9],
[2, 14, 8],
[2, 15, 10],
[2, 16, 6],
[2, 17, 5],
[2, 18, 5],
[2, 19, 5],
[2, 20, 7],
[2, 21, 4],
[2, 22, 2],
[2, 23, 4],
[3, 0, 7],
[3, 1, 3],
[3, 2, 0],
[3, 3, 0],
[3, 4, 0],
[3, 5, 0],
[3, 6, 0],
[3, 7, 0],
[3, 8, 1],
[3, 9, 0],
[3, 10, 5],
[3, 11, 4],
[3, 12, 7],
[3, 13, 14],
[3, 14, 13],
[3, 15, 12],
[3, 16, 9],
[3, 17, 5],
[3, 18, 5],
[3, 19, 10],
[3, 20, 6],
[3, 21, 4],
[3, 22, 4],
[3, 23, 1],
[4, 0, 1],
[4, 1, 3],
[4, 2, 0],
[4, 3, 0],
[4, 4, 0],
[4, 5, 1],
[4, 6, 0],
[4, 7, 0],
[4, 8, 0],
[4, 9, 2],
[4, 10, 4],
[4, 11, 4],
[4, 12, 2],
[4, 13, 4],
[4, 14, 4],
[4, 15, 14],
[4, 16, 12],
[4, 17, 1],
[4, 18, 8],
[4, 19, 5],
[4, 20, 3],
[4, 21, 7],
[4, 22, 3],
[4, 23, 0],
[5, 0, 2],
[5, 1, 1],
[5, 2, 0],
[5, 3, 3],
[5, 4, 0],
[5, 5, 0],
[5, 6, 0],
[5, 7, 0],
[5, 8, 2],
[5, 9, 0],
[5, 10, 4],
[5, 11, 1],
[5, 12, 5],
[5, 13, 10],
[5, 14, 5],
[5, 15, 7],
[5, 16, 11],
[5, 17, 6],
[5, 18, 0],
[5, 19, 5],
[5, 20, 3],
[5, 21, 4],
[5, 22, 2],
[5, 23, 0],
[6, 0, 1],
[6, 1, 0],
[6, 2, 0],
[6, 3, 0],
[6, 4, 0],
[6, 5, 0],
[6, 6, 0],
[6, 7, 0],
[6, 8, 0],
[6, 9, 0],
[6, 10, 1],
[6, 11, 0],
[6, 12, 2],
[6, 13, 1],
[6, 14, 3],
[6, 15, 4],
[6, 16, 0],
[6, 17, 0],
[6, 18, 0],
[6, 19, 0],
[6, 20, 1],
[6, 21, 2],
[6, 22, 2],
[6, 23, 6]
].map(function(item) {
return {
value: [item[1], item[0], item[2]]
};
}),
shading: "color",
label: {
show: false,
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
itemStyle: {
opacity: 0.4
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: "#900"
}
},
itemStyle: {
color: "#900"
}
}
}
]
},
options14: {
tooltip: {},
backgroundColor: "#fff",
visualMap: {
show: false,
dimension: 2,
min: 0,
max: 30,
inRange: {
color: [
"#313695",
"#4575b4",
"#74add1",
"#abd9e9",
"#e0f3f8",
"#ffffbf",
"#fee090",
"#fdae61",
"#f46d43",
"#d73027",
"#a50026"
]
}
},
xAxis3D: {
type: "value"
},
yAxis3D: {
type: "value"
},
zAxis3D: {
type: "value"
},
grid3D: {
viewControl: {
projection: "orthographic"
}
},
series: [
{
type: "line3D",
data: (function() {
let data = [];
// Parametric curve
for (let t = 0; t < 25; t += 0.001) {
let x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t);
let y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t);
let z = t + 2.0 * Math.sin(75 * t);
data.push([x, y, z]);
}
return data;
})(),
lineStyle: {
width: 4
}
}
]
},
options15: {
tooltip: {},
backgroundColor: "#fff",
visualMap: {
show: false,
dimension: 2,
min: -1,
max: 1,
inRange: {
color: [
"#313695",
"#4575b4",
"#74add1",
"#abd9e9",
"#e0f3f8",
"#ffffbf",
"#fee090",
"#fdae61",
"#f46d43",
"#d73027",
"#a50026"
]
}
},
xAxis3D: {
type: "value"
},
yAxis3D: {
type: "value"
},
zAxis3D: {
type: "value"
},
grid3D: {
viewControl: {
// projection: 'orthographic'
}
},
series: [
{
type: "surface",
wireframe: {
// show: false
},
equation: {
x: {
step: 0.05
},
y: {
step: 0.05
},
z: function(x, y) {
if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
return "-";
}
return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
}
}
}
]
}
},
actions: []
};
},
mounted: function() {
return {};
},
computed: {},
methods: {}
});
</script>
</body>
</html>