Commit 9ef05506 authored by caojm's avatar caojm

Merge branch 'dev' of http://gitlab.suntrayoa.com/geqilin/energyai_vue into dev

parents b4ffa785 1d66db05
var CONFIG = {}
// 页面 title 前缀
CONFIG.TITLE = '轨道交通后台管理系统'
CONFIG.TITLE = 'AI节能管理系统'
// 网络请求公用地址
......
......@@ -10,7 +10,7 @@
<link href="icon.jpg" rel="icon" type="image/x-icon" />
<!-- <script src = "https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script> -->
<title>城市轨道交通安防系统</title>
<title>AI节能管理系统</title>
<script>
//禁用所有控制台输出
// var console={};
......
......@@ -645,23 +645,8 @@ export default {
}
}
// -----------
.d2-layout-header-aside-group
.d2-layout-header-aside-content
.d2-theme-container
.d2-theme-container-main
.d2-theme-container-main-body
.container-component
.d2-container-full
.d2-container-full__body {
margin-bottom: 50px;
}
//-- 公共样式--//
// page页背景色
.d2-container-full__body {
background-color: #b9c9e3 !important;
}
// 弹出框
.el-dialog__title {
......@@ -721,48 +706,6 @@ export default {
transform: translateY(-12px);
}
// 二级菜单
.monitor_menu {
.menu_item {
width: 120px;
height: 46px;
line-height: 46px;
text-align: center;
color: #ccc;
box-shadow: 0px 0 2px #000 !important;
background-image: linear-gradient(to top, #335274, #4d759a) !important;
text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3) !important;
}
.is-active {
color: #fff !important;
background: linear-gradient(
0deg,
rgba(33, 172, 252, 1),
rgba(48, 136, 193, 1)
) !important;
}
ul {
a:nth-child(1) {
li {
border-radius: 9px 0 0 9px !important;
}
}
a:last-child {
li {
border-radius: 0 9px 9px 0 !important;
}
}
}
}
.el-table .cell {
/*display: flex;*/
/*justify-content: center;*/
}
//-- 公共样式--//
.my_checkbox {
.el-checkbox__input.is-checked + .el-checkbox__label {
......
......@@ -86,15 +86,20 @@
padding: 0px;
position: relative;
overflow: hidden;
.d2-theme-container-main-layer {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: #E6EAEE;
}
.d2-theme-container-main-body {
position: relative;
margin: 24px 24px 85px;
}
}
}
......
......@@ -13,6 +13,7 @@
// 背景图片和遮罩
.d2-layout-header-aside-group {
background-color: $theme-bg-color;
background-color: #fff;
.d2-layout-header-aside-mask {
background: $theme-bg-mask;
}
......
<svg viewBox="0 0 60 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>城市轨道交通安防系统</desc>
<desc>AI节能管理系统</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="logo-no-shadow" transform="translate(-3.000000, -3.000000)">
......
<template>
<el-menu-item v-if="menu.name != '报警中心'" :index="menu.path || uniqueId" @click="handleMenuClick" >
<!-- <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i> -->
<span :class="menu.icon" class="menu_icon"></span>
<!-- <d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/> -->
<!-- <i v-else class="fa fa-file-o"></i> -->
<span class="zMenu_item" slot="title">{{menu.title || '未命名菜单'}}</span>
<el-menu-item :index="menu.url||menu.path || uniqueId">
<i v-if="menu.icon" :class="`el-icon-my-${menu.icon}`"></i>
<d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/>
<span v-else >&emsp;</span>
<span slot="title">{{menu.title|| menu.name || '未命名菜单'}}</span>
</el-menu-item>
</template>
<script>
import { uniqueId } from 'lodash'
export default {
inject: ['reload'],
name: 'd2-layout-header-aside-menu-item',
props: {
menu: {
......@@ -20,71 +18,10 @@ export default {
default: () => {}
}
},
data() {
data () {
return {
uniqueId: uniqueId('d2-menu-empty-')
}
},
methods: {
handleMenuClick () {
//点击菜单时重新刷新页面
//this.reload()
}
}
}
</script>
<style >
.menu_icon {
width: 22px;
height: 22px;
transform: translateY(10px);
}
.sys {
background: url(../../../imgs/iconImg/sys.png);
background-size: 100% 100%;
}
.em {
background: url(../../../imgs/iconImg/em.png);
background-size: 100% 100%;
}
.eq {
background: url(../../../imgs/iconImg/eq.png);
background-size: 100% 100%;
}
.plan {
background: url(../../../imgs/iconImg/plan.png);
background-size: 100% 100%;
}
.linkage {
background: url(../../../imgs/iconImg/linkage.png);
background-size: 100% 100%;
}
.monitor {
background: url(../../../imgs/iconImg/monitor.png);
background-size: 100% 100%;
}
.access {
background: url(../../../imgs/iconImg/access.png);
background-size: 100% 100%;
}
.police {
background: url(../../../imgs/iconImg/police.png);
background-size: 100% 100%;
}
.inspect {
background: url(../../../imgs/iconImg/inspect.png);
background-size: 100% 100%;
}
.patrol {
background: url(../../../imgs/iconImg/patrol.png);
background-size: 100% 100%;
}
.ol {
background: url(../../../imgs/iconImg/ol.png);
background-size: 100% 100%;
}
/* .zMenu_item{
color:rgba(255,255,255,0.75);
} */
</style>
<template>
<el-submenu :index="menu.path || uniqueId">
<el-submenu :index="menu.path|| menu.id ||uniqueId ">
<template slot="title">
<!-- <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
<i v-if="menu.icon" :class="`el-icon-my-${menu.icon}`"></i>
<d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/>
<i v-else class="fa fa-folder-o"></i> -->
<i :class="menu.icon"></i>
<span slot="title">{{menu.title}}</span>
<span v-else >&emsp;</span>
<span slot="title">{{menu.name}}</span>
</template>
<template v-for="(child, childIndex) in menu.list">
<d2-layout-header-aside-menu-item v-if="child.list == undefined" :menu="child" :key="childIndex"/>
<d2-layout-header-aside-menu-sub v-else :menu="child" :key="childIndex"/>
<d2-layout-header-aside-menu-item v-if="child.list.length==0" :menu="child" :key="childIndex"/>
<d2-layout-header-aside-menu-sub v-else :menu="{...child}" :key="childIndex"/>
</template>
</el-submenu>
</template>
......
......@@ -6,15 +6,11 @@
:default-active="active"
ref="menu"
@select="handleMenuSelect">
<template v-for="(menu, menuIndex) in aside">
<d2-layout-header-aside-menu-item v-if="menu.list == undefined" :menu="menu" :key="menuIndex"/>
<template v-for="(menu, menuIndex) in header">
<d2-layout-header-aside-menu-item v-if="menu.list.length==0" :menu="menu" :key="menuIndex"/>
<d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
</template>
</el-menu>
<div v-if="aside.length === 0 && !asideCollapse" class="d2-layout-header-aside-menu-empty" flex="dir:top main:center cross:center">
<d2-icon name="inbox"/>
<span>没有侧栏菜单</span>
</div>
</div>
</template>
......@@ -38,128 +34,14 @@ export default {
active: '',
asideHeight: 300,
BS: null,
aside: [
// {
// title: '电子围栏报警',
// path: '/sys/log',
// icon: 'el-icon-bell'
// },
// {
// title: '报警信息列表',
// path: '/sys/setting/sql',
// icon: 'el-icon-menu'
// },
{
title: '电子地图',
path: '/ol',
icon: 'el-icon-setting',
list: [
{ title: '电子地图', path: '/ol/demo' }
]
},
{
title: '设备管理',
path: '/eq',
icon: 'el-icon-setting',
list: [
{ title: '设备管理', path: '/eq/equ' },
{ title: '设备拓扑监测', path: '/eq/topology' },
{ title: '告警信息', path: '/eq/alarm' },
{ title: '告警统计', path: '/eq/chart' }
]
},
{
title: '视频监控',
path: '/monitor',
icon: 'el-icon-setting',
list: [
{ title: '电子地图', path: '/monitor/point' },
{ title: '实时监控', path: '/monitor/monitor' },
{ title: '视频轮播', path: '/monitor/rotation' },
{ title: '视频回放', path: '/monitor/playback' },
{ title: '历史指令', path: '/monitor/instructions' }
]
},
{
title: '出入口控制',
path: '/access',
icon: 'el-icon-setting',
list: [
{ title: '电子地图', path: '/access/point' },
{ title: '发卡查询', path: '/access/card' },
{ title: '历史指令', path: '/access/instructions' }
]
},
{
title: '入侵报警',
path: '/police',
icon: 'el-icon-setting',
list: [
{ title: '电子地图', path: '/police/point' },
{ title: '历史指令', path: '/police/instructions' }
]
},
{
title: '安全检查',
path: '/inspect',
icon: 'el-icon-setting',
list: [
{ title: '电子地图', path: '/inspect/point' },
{ title: '实时安检', path: '/inspect/security' },
{ title: '安检视频回放', path: '/inspect/playback' },
{ title: '历史指令', path: '/inspect/instructions' }
]
},
{
title: '电子巡更',
path: '/patrol',
icon: 'el-icon-setting',
list: [
{ title: '巡查点', path: '/patrol/spot' },
{ title: '巡查线路', path: '/patrol/line' },
{ title: '巡查计划', path: '/patrol/plan' },
{ title: '巡查结果', path: '/patrol/result' },
{ title: '巡查机管理', path: '/patrol/machine' },
{ title: '漏检数据', path: '/patrol/data' }
]
},
{
title: '应急物资管理',
path: '/em',
icon: 'el-icon-setting',
list: [
{ title: '应急部门管理', path: '/em/org' },
{ title: '应急专家管理', path: '/em/proficient' },
{ title: '应急人员管理', path: '/em/person' },
{ title: '应急物资管理', path: '/em/material' }
]
},
{
title: '系统管理',
path: '/sys',
icon: 'el-icon-setting',
list: [
// {title:'菜单管理',path:'/sys/menu'},
{ title: '机构管理', path: '/sys/org' },
{ title: '用户管理', path: '/sys/admin' },
{ title: '角色管理', path: '/sys/role' },
{ title: '系统日志', path: '/sys/logs' },
{ title: '资源点管理', path: '/sys/point' },
{ title: '线路站点管理', path: '/sys/road' },
{ title: '系统参数设置', path: '/sys/parameter' },
{ title: '代码生成', path: '/sys/code' },
{ title: '数据字典', path: '/sys/dictionary' }
]
}
]
aside: []
}
},
computed: {
...mapState('d2admin/menu', [
// 'aside',
'header',
'asideCollapse'
])
},
......
This diff is collapsed.
This diff is collapsed.
......@@ -11,7 +11,7 @@ let util = {
* @param {String} title 标题
*/
util.title = function (titleText) {
const processTitle = '城市轨道交通安防系统'
const processTitle = 'AI节能管理系统'
window.document.title = `${processTitle}${titleText ? ` | ${titleText}` : ''}`
}
......@@ -29,7 +29,6 @@ util.open = function (url) {
document.body.removeChild(document.getElementById('d2admin-menu-link'))
}
/**
* @about Tree 数据格式转化
* @param rows:json数据对象
......@@ -43,62 +42,56 @@ util.open = function (url) {
util.ConvertToTreeJson = function (rows, idFieldName, pidFieldName, fileds) {
function exists(rows, ParentId) {
for (var i = 0; i < rows.length; i++) {
if (rows[i][idFieldName] == ParentId)
return true;
if (rows[i][idFieldName] == ParentId) { return true }
}
return false;
return false
}
var nodes = [];
var nodes = []
// get the top level nodes
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var row = rows[i]
if (!exists(rows, row[pidFieldName])) {
var data = {
id: row[idFieldName]
}
var arrFiled = fileds.split(",");
for (var j = 0; j < arrFiled.length; j++)
{
if (arrFiled[j] != idFieldName)
data[arrFiled[j]] = row[arrFiled[j]];
var arrFiled = fileds.split(',')
for (var j = 0; j < arrFiled.length; j++) {
if (arrFiled[j] != idFieldName) { data[arrFiled[j]] = row[arrFiled[j]] }
}
nodes.push(data);
nodes.push(data)
}
}
var toDo = [];
var toDo = []
for (var i = 0; i < nodes.length; i++) {
toDo.push(nodes[i]);
toDo.push(nodes[i])
}
while (toDo.length) {
var node = toDo.shift(); // the parent node
var node = toDo.shift() // the parent node
// get the children nodes
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var row = rows[i]
if (row[pidFieldName] == node.id) {
var child = {
id: row[idFieldName]
};
var arrFiled = fileds.split(",");
}
var arrFiled = fileds.split(',')
for (var j = 0; j < arrFiled.length; j++) {
if (arrFiled[j] != idFieldName) {
child[arrFiled[j]] = row[arrFiled[j]];
child[arrFiled[j]] = row[arrFiled[j]]
}
}
if (node.children) {
node.children.push(child);
node.children.push(child)
} else {
node.children = [child];
node.children = [child]
}
toDo.push(child);
toDo.push(child)
}
}
}
return nodes;
return nodes
}
export default util
<template>
<div>
设备故障报警
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
<template>
<div style="background:#4F789D;">
<el-menu :default-active="active" @select="handleSelect" class="oMenu" mode="horizontal" ref="menuItem" >
<router-link :key="item.menuId" :menuList="menuList" :to="item.path" v-for="item in menuList">
<el-menu-item :index="item.path" class="menu_item" @click="handleMenuClick" >{{item.name}}</el-menu-item>
</router-link>
</el-menu>
</div>
</template>
<script>
export default {
inject: ['reload'],
data() {
return {
activeName: '1'
// menList: this.filterData(this.menuList) || []
}
},
props: ['menuList', 'active'],
// watch: {
// $route() {
// setTimeout(() => {
// this.$refs.menuItem.activeIndex = this.$route.path
// }, 100)
// }
// menList() {
// this.$refs.menuItem.activeIndex = this.menList[0].path
// }
// },
methods: {
handleMenuClick () {
// console.log(this.active)
//点击菜单时重新刷新页面
// this.reload()
},
handleSelect(key, keyPath) {
// console.log(key, keyPath);
}
// filterData(list) {
// // console.log(list)
// let men = JSON.parse(sessionStorage.getItem('menuList') || '')
// let a = []
// men.map(item => {
// a.push.apply(a, item.list)
// })
// let urlList = a.map(item => {
// if (item.url != null) {
// return item.url
// }
// })
// // console.log('urlList', urlList)
// let ll = list.filter(item => {
// return urlList.includes(item.path)
// })
// // console.log('前台路由列表', list.map(item => item.path))
// // console.log('后台路由列表', urlList.filter(item => item))
// setTimeout(() => {
// this.$refs.menuItem.activeIndex = ll[0].path
// }, 100)
// this.$router.replace(ll[0].path)
// return ll
// }
}
}
</script>
<style lang="scss" scoped>
.oMenu {
display: flex;
background: #4f789d;
height: 65px;
align-items: center;
width: 1200px;
margin-left: 20px;
}
</style>
<style>
/* .theme-tx1 .el-menu--horizontal .menu_item:not(.is-disabled):hover {
color: #fff;
background: #2999dd;
} */
</style>
<template>
<div id="map" class="map" style="width: 100%;height: 680px;position: absolute;"></div>
</template>
<script>
import 'ol/ol.css'
import { Map, View, layer, Markers } from 'ol'
import { Projection, Transform } from 'ol/proj'
import { getCenter } from 'ol/extent'
import overviewmap from 'ol/control/OverviewMap'
import ImageLayer from 'ol/layer/Image'
import ImageStatic from 'ol/source/ImageStatic'
import { control } from 'ol/control/Control'
import Zoom from 'ol/control/Zoom'
import { DoubleClickZoom } from 'ol/interaction'
// 图上图标相关
import OlFeature from 'ol/Feature'
import OlGeomPoint from 'ol/geom/Point'
import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString'
// 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
import { Select } from 'ol/interaction'
let that
export default {
data() {
return {
imgLayerList: [],
controlList: [],
}
},
props:['mapList'],
mounted() {
setTimeout(() => {
this.initMap()
this.imgLayerList[0].setVisible(true) //初始第一个显示
}, 2000)
},
methods: {
// 初始化地图
initMap(url) {
let mapList = this.mapList
this.imgurl = url
// 计算静态地图映射到地图上的范围
let extent = [-1100, 0, 1460, 820]
let projection = new Projection({
// 投影
code: 'xkcd-image',
units: 'pixels',
extent: extent
})
if (mapList.length > 0) {
for (var i = 0; i < mapList.length; i++) {
let layerItem = new ImageLayer({
id: mapList[i].id,
source: new ImageStatic({
url: mapList[i].readPath, //这里添加静态图片的地址
projection: projection,
imageExtent: extent
}),
visible: false
})
this.imgLayerList.push(layerItem)
let controlItem = new overviewmap({
className: 'ol-overviewmap myOverview', //鹰眼控件样式
// 在鹰眼中加载相同坐标系下不同数据源的图层
layers: [
new ImageLayer({
source: new ImageStatic({
url: mapList[i].readPath, //这里添加静态图片的地址
projection: projection,
imageExtent: extent
})
})
],
// layers:this.controlList,
collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识
label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识
collapsed: false //初始为展开方式
})
this.controlList.push(controlItem)
}
}
let zoomControl = new Zoom({
delta: 0.2,
zoomInTipLabel: '',
zoomOutTipLabel: ''
})
// 大图
this.map = new Map({
target: 'map',
layers: this.imgLayerList,
controls: [zoomControl],
view: new View({
projection: projection,
center: getCenter([0, 0, 418, 600]), // 获取范围的中心坐标。
zoom: 2.5,
maxZoom: 5.0,
minZoom: 1.5,
  extent: [-1100, -100, 2000, 1000]//[minX, minY, maxX, maxY] 控制拖动
}),
})
// 删除默认的双击事件
const dblClickInteraction = this.map
.getInteractions()
.getArray()
.find(interaction => {
return interaction instanceof DoubleClickZoom
})
this.map.removeInteraction(dblClickInteraction)
//将鹰眼控件加载到map中
this.map.addControl(this.controlList[0])
//点击事件
this.changeVectorLayer(this.list)
this.map.on('click', function (evt) {
let feature = evt.map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature
})
if (feature) {
for (let i in that.list) {
let style = that.getPointStyle(that.list[i].imageSrc + '.png', that.list[i].name)
let style2 = that.getPointStyle(that.list[i].imageSrc + '2.png', that.list[i].name,0.3)
//获取feature对象
let feature_ = that.vectorLayer.getSource().getFeatureById(that.list[i].id)
//获取红外对射或者振动光纤第二个点的feature对象
let featureEnd = that.vectorLayer.getSource().getFeatureById(that.list[i].key + 'end')
if (feature_) {
if (feature_ === feature || featureEnd === feature) {
//修改选中样式
feature_.setStyle(style2)
if (featureEnd) {
featureEnd.setStyle(style2)
}
that.pointListClick(that.list[i])
} else {
//清除选中以外的样式
feature_.setStyle(style)
if (featureEnd) {
featureEnd.setStyle(style)
}
}
}
}
}
})
},
getPointStyle(src, name,zoom) {
let style = new OlStyleStyle({
image: new OlStyleIcon({
anchor: [0.5, 0.5],
scale: zoom || 0.4,
//rotation:0 旋转度
src: require('@/assets/images/' + src)
}),
text: new Text({
text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小
fill: new Fill({
// 设置字体颜色
color: 'black'
}),
offsetY: 30 // 设置文字偏移量
})
})
return style
},
changeVectorLayer(list) {
if (list) {
this.list = list
} else {
return
}
if (this.map) {
this.map.removeLayer(this.vectorLayer)
this.map.removeLayer(this.lineVectorLayer)
} else {
return
}
this.lineVectorLayer = new OlLayerVector({
source: new OlSourceVector({
features: []
}),
style: new OlStyleStyle({
stroke: new Stroke({
color: '#409EFF',
width: 3
})
})
})
this.map.addLayer(this.lineVectorLayer)
let lineLastArr = []
let featuresArr = []
for (let i in list) {
if (list[i].imageSrc) {
//振动光纤和红外线对射
if (list[i].type === 'e670524ecb9e4a03b8ddbc7d91a63b1b' || list[i].type === '4f69755dbc0c45e49c142857286c5669') {
let lineFeatures = []
lineFeatures.push([list[i].xlongit, list[i].ylat])
lineFeatures.push([list[i].xpoint, list[i].ypoint])
this.lineVectorLayer.getSource().addFeature(new OlFeature(new LineString(lineFeatures)))
lineLastArr.push(list[i])
}
featuresArr.push(this.getFeature(list[i].xlongit, list[i].ylat))
let style = this.getPointStyle(list[i].imageSrc + '.png', this.list[i].name)
featuresArr[i].setStyle(style)
featuresArr[i].setId(list[i].id)
} else {
continue
}
}
let LinefeaturesArr = []
for (let i in lineLastArr) {
// let bean = JSON.parse(JSON.stringify(lineLastArr[i]))
// LinefeaturesArr.push(this.getFeature(bean.xpoint, bean.ypoint))
// let style = this.getPointStyle(bean.imageSrc + '.png', bean.name)
// LinefeaturesArr[i].setStyle(style)
// bean.id = getUUID()
// bean.key = lineLastArr[i].id
// LinefeaturesArr[i].setId(bean.key + 'end')
// this.list.push(bean)
LinefeaturesArr.push(this.getFeature(lineLastArr[i].xpoint, lineLastArr[i].ypoint))
let style = this.getPointStyle(lineLastArr[i].imageSrc + '.png', lineLastArr[i].name)
LinefeaturesArr[i].setStyle(style)
LinefeaturesArr[i].setId(lineLastArr[i].key + 'end')
this.list.push(lineLastArr[i])
}
this.vectorLayer = new OlLayerVector({
source: new OlSourceVector({
features: featuresArr.concat(LinefeaturesArr)
})
})
this.map.addLayer(this.vectorLayer)
},
getFeature(x, y) {
return new OlFeature({
type: 'icon',
geometry: new OlGeomPoint([x, y])
})
},
},
// 改变层级和鹰眼图
changeImgControl(id){
let srcIndex = this.imgLayerList.findIndex((e) => {
return e.values_.id == id
})
this.map.removeControl(this.controlList[srcIndex])
this.map.addControl(this.controlList[srcIndex])
for (var k = 0; k < this.imgLayerList.length; k++) {
if (this.imgLayerList[k].values_.id == id) {
// that.imgurl=map.readPath
this.imgLayerList[k].setVisible(true)
} else {
this.imgLayerList[k].setVisible(false)
}
}
},
}
</script>
<style scoped>
</style>
/* 操作三点*/
.el-menu {
border-right: 0;
background: rgba(255, 255, 255, 0.1);
}
.el-menu--collapse {
width: 100%;
}
.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
min-width: 100px;
text-align: center;
padding: 0 0 0 0;
transform: translateX(25px);
}
.el-submenu__title {
height: 40px;
line-height: 40px;
}
/* .theme-tx1 .el-submenu__title:hover {
color: #293849;
background: #f5f7fa !important;
} */
.el-submenu__title:hover {
color: #293849;
background: #f5f7fa !important;
}
.el-menu-item-group{
background:white ;
}
.el-menu-item-group__title {
padding: 0px 0 0px 0px;
line-height: normal;
font-size: 14px;
text-align: center;
color: #909399;
}
.el-menu-item-group .el-menu-item {
border-left: 1px solid #e9e9eb;
border-right: 1px solid #e9e9eb;
border-bottom: 1px solid #e9e9eb;
font-size: 14px;
}
.el-menu-item-group .el-menu-item:nth-child(1) {
border-top: 1px solid #e9e9eb;
}
.avatar-uploader-icon {
border: 1px dashed #cccccc;
}
<template>
<d2-container>
<d2-page-cover
title="示例"
sub-title="供借鉴和参考的页面">
<img src="./image/icon.png">
</d2-page-cover>
</d2-container>
</template>
<template>
<el-popover
:placement="popoverPlacement"
:title="popoverTitle"
:width="popoverWidth"
trigger="hover">
<el-switch
v-model="currentValue"
:active-color="activeColor"
:inactive-color="inactiveColor"
:active-text="activeText"
:inactive-text="inactiveText"
:disabled="disabled"
@change="handleChange">
</el-switch>
<span slot="reference">
<slot v-if="value" name="active"/>
<slot v-else name="inactive"/>
</span>
</el-popover>
</template>
<script>
export default {
props: {
value: {
default: false
},
popoverPlacement: {
default: 'left'
},
popoverTitle: {
default: '修改'
},
popoverWidth: {
default: '150'
},
activeColor: {
default: '#67C23A'
},
inactiveColor: {
default: '#F56C6C'
},
activeText: {
default: '正常'
},
inactiveText: {
default: '禁用'
}
},
data () {
return {
currentValue: false,
disabled: false
}
},
watch: {
value: {
handler (val) {
this.currentValue = val
},
immediate: true
}
},
methods: {
handleChange (val) {
this.disabled = true
this.$message({
message: '正在发送请求',
type: 'info'
})
// 请将 setTimeout 修改为您的异步请求
setTimeout(() => {
this.disabled = false
this.$message({
message: '修改成功',
type: 'success'
})
this.$emit('change', val)
// 如果修改失败的话需要在这里手动将 currentValue 复原
}, 1000)
}
}
}
</script>
<template>
<span slot="reference">
<d2-icon
v-if="disabled"
name="hourglass-start"
style="font-size: 14px; line-height: 32px; color: #909399;"/>
<span @click="handleClick">
<slot
v-if="!disabled && value"
name="active"/>
<slot
v-if="!disabled && !value"
name="inactive"/>
</span>
</span>
</template>
<script>
export default {
props: {
value: {
default: false
}
},
data () {
return {
currentValue: false,
disabled: false
}
},
watch: {
value: {
handler (val) {
this.currentValue = val
},
immediate: true
}
},
methods: {
handleClick () {
// 这里先赋值是为了和 TypeControl 使用一样的 handleChange
this.currentValue = !this.currentValue
this.handleChange(this.currentValue)
},
handleChange (val) {
this.disabled = true
this.$message({
message: '正在发送请求',
type: 'info'
})
// 请将 setTimeout 修改为您的异步请求
setTimeout(() => {
this.disabled = false
this.$message({
message: '修改成功',
type: 'success'
})
this.$emit('change', val)
// 如果修改失败的话需要在这里手动将 currentValue 复原
}, 1000)
}
}
}
</script>
<template>
<el-pagination
:current-page="current"
:page-size="size"
:total="total"
:page-sizes="[100, 200, 300, 400]"
layout="total, sizes, prev, pager, next, jumper"
style="margin: -10px;"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</template>
<script>
export default {
props: {
current: {
default: 0
},
size: {
default: 0
},
total: {
default: 0
}
},
methods: {
handleSizeChange (val) {
this.$emit('change', {
current: this.current,
size: val,
total: this.total
})
},
handleCurrentChange (val) {
this.$emit('change', {
current: val,
size: this.size,
total: this.total
})
}
}
}
</script>
<template>
<el-form
:inline="true"
:model="form"
:rules="rules"
ref="form"
size="mini"
style="margin-bottom: -18px;">
<el-form-item label="状态" prop="type">
<el-select
v-model="form.type"
placeholder="状态选择"
style="width: 100px;">
<el-option label="状态 1" value="1"/>
<el-option label="状态 2" value="2"/>
<el-option label="状态 3" value="3"/>
<el-option label="状态 4" value="4"/>
<el-option label="状态 5" value="5"/>
</el-select>
</el-form-item>
<el-form-item label="用户" prop="user">
<el-input
v-model="form.user"
placeholder="用户"
style="width: 100px;"/>
</el-form-item>
<el-form-item label="卡密" prop="key">
<el-input
v-model="form.key"
placeholder="卡密"
style="width: 120px;"/>
</el-form-item>
<el-form-item label="备注" prop="note">
<el-input
v-model="form.note"
placeholder="备注"
style="width: 120px;"/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="handleFormSubmit">
<d2-icon name="search"/>
查询
</el-button>
</el-form-item>
<el-form-item>
<el-button
@click="handleFormReset">
<d2-icon name="refresh"/>
重置
</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data () {
return {
form: {
type: '1',
user: 'Suntray',
key: '',
note: ''
},
rules: {
type: [ { required: true, message: '请选择一个状态', trigger: 'change' } ],
user: [ { required: true, message: '请输入用户', trigger: 'change' } ]
}
}
},
methods: {
handleFormSubmit () {
this.$refs.form.validate((valid) => {
if (valid) {
this.$emit('submit', this.form)
} else {
this.$notify.error({
title: '错误',
message: '表单校验失败'
})
return false
}
})
},
handleFormReset () {
this.$refs.form.resetFields()
}
}
}
</script>
<template>
<div>
<el-form
:inline="true"
size="mini">
<el-form-item :label="`已选数据下载 [ ${currentTableData.length} ]`">
<el-button-group>
<el-button
type="primary"
size="mini"
:disabled="currentTableData.length === 0"
@click="handleDownloadXlsx(currentTableData)">
xlsx
</el-button>
<el-button
type="primary"
size="mini"
:disabled="currentTableData.length === 0"
@click="handleDownloadCsv(currentTableData)">
csv
</el-button>
</el-button-group>
</el-form-item>
<el-form-item :label="`已选数据下载 [ ${multipleSelection.length} ]`">
<el-button-group>
<el-button
type="primary"
size="mini"
:disabled="multipleSelection.length === 0"
@click="handleDownloadXlsx(multipleSelection)">
xlsx
</el-button>
<el-button
type="primary"
size="mini"
:disabled="multipleSelection.length === 0"
@click="handleDownloadCsv(multipleSelection)">
csv
</el-button>
</el-button-group>
</el-form-item>
</el-form>
<el-table
:data="currentTableData"
v-loading="loading"
size="mini"
stripe
style="width: 100%;"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column label="卡密" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{scope.row.key}}
</template>
</el-table-column>
<el-table-column label="面值" width="60" align="center">
<template slot-scope="scope">
<el-tag
size="mini"
type="success">
{{scope.row.value}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" width="50" align="center">
<template slot-scope="scope">
<boolean-control
:value="scope.row.type"
@change="(val) => {
handleSwitchChange(val, scope.$index)
}">
<d2-icon
name="check-circle"
style="font-size: 20px; line-height: 32px; color: #67C23A;"
slot="active"/>
<d2-icon
name="times-circle"
style="font-size: 20px; line-height: 32px; color: #F56C6C;"
slot="inactive"/>
</boolean-control>
</template>
</el-table-column>
<el-table-column label="状态" width="50" align="center">
<template slot-scope="scope">
<boolean-control-mini
:value="scope.row.type"
@change="(val) => {
handleSwitchChange(val, scope.$index)
}">
<d2-icon
name="check-circle"
style="font-size: 20px; line-height: 32px; color: #67C23A;"
slot="active"/>
<d2-icon
name="times-circle"
style="font-size: 20px; line-height: 32px; color: #F56C6C;"
slot="inactive"/>
</boolean-control-mini>
</template>
</el-table-column>
<el-table-column label="管理员" width="60">
<template slot-scope="scope">
{{scope.row.admin}}
</template>
</el-table-column>
<el-table-column label="管理员备注" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{scope.row.adminNote}}
</template>
</el-table-column>
<el-table-column label="创建时间" width="150" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{scope.row.dateTimeCreat}}
</template>
</el-table-column>
<el-table-column label="使用状态" width="100" align="center">
<template slot-scope="scope">
<el-tag
size="mini"
:type="scope.row.used ? 'info' : ''">
{{scope.row.used ? '已使用' : '未使用'}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="使用时间" width="150" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{scope.row.dateTimeUse}}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import BooleanControl from '../BooleanControl'
import BooleanControlMini from '../BooleanControlMini'
export default {
components: {
BooleanControl,
BooleanControlMini
},
props: {
tableData: {
default: () => []
},
loading: {
default: false
}
},
data () {
return {
currentTableData: [],
multipleSelection: [],
downloadColumns: [
{ label: '卡密', prop: 'key' },
{ label: '面值', prop: 'value' },
{ label: '状态', prop: 'type' },
{ label: '管理员', prop: 'admin' },
{ label: '管理员备注', prop: 'adminNote' },
{ label: '创建时间', prop: 'dateTimeCreat' },
{ label: '使用状态', prop: 'used' },
{ label: '使用时间', prop: 'dateTimeUse' }
]
}
},
watch: {
tableData: {
handler (val) {
this.currentTableData = val
},
immediate: true
}
},
methods: {
handleSwitchChange (val, index) {
const oldValue = this.currentTableData[index]
this.$set(this.currentTableData, index, {
...oldValue,
type: val
})
// 注意 这里并没有把修改后的数据传递出去 如果需要的话请自行修改
},
handleSelectionChange (val) {
this.multipleSelection = val
},
downloadDataTranslate (data) {
return data.map(row => ({
...row,
type: row.type ? '禁用' : '正常',
used: row.used ? '已使用' : '未使用'
}))
},
handleDownloadXlsx (data) {
this.$export.excel({
title: 'SuntrayAdmin 表格示例',
columns: this.downloadColumns,
data: this.downloadDataTranslate(data)
})
.then(() => {
this.$message('导出表格成功')
})
},
handleDownloadCsv (data) {
this.$export.csv({
title: 'SuntrayAdmin 表格示例',
columns: this.downloadColumns,
data: this.downloadDataTranslate(data)
})
.then(() => {
this.$message('导出CSV成功')
})
}
}
}
</script>
<template>
<d2-container>
<demo-page-header
slot="header"
@submit="handleSubmit"
ref="header"/>
<demo-page-main
:tableData="table"
:loading="loading"/>
<demo-page-footer
slot="footer"
:current="page.current"
:size="page.size"
:total="page.total"
@change="handlePaginationChange"/>
</d2-container>
</template>
<script>
import { BusinessTable1List } from '@/api/demo/business/table/1'
export default {
// name 值和本页的 $route.name 一致才可以缓存页面
name: 'demo-business-table-1',
components: {
'DemoPageHeader': () => import('./componnets/PageHeader'),
'DemoPageMain': () => import('./componnets/PageMain'),
'DemoPageFooter': () => import('./componnets/PageFooter')
},
data () {
return {
table: [],
loading: false,
page: {
current: 1,
size: 100,
total: 0
}
}
},
methods: {
handlePaginationChange (val) {
this.$notify({
title: '分页变化',
message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
})
this.page = val
// nextTick 只是为了优化示例中 notify 的显示
this.$nextTick(() => {
this.$refs.header.handleFormSubmit()
})
},
handleSubmit (form) {
this.loading = true
this.$notify({
title: '开始请求模拟表格数据'
})
BusinessTable1List({
...form,
page: this.page
})
.then(res => {
this.loading = false
this.$notify({
title: '模拟表格数据请求完毕'
})
this.table = res.data.list
this.page = res.data.page
// this.page.total = 1000
})
.catch(err => {
this.loading = false
this.$notify({
title: '模拟表格数据请求异常'
})
console.log('err', err)
})
}
}
}
</script>
<template>
<d2-container>
<d2-page-cover
title="图表"
sub-title="集成图表组件">
<img src="./image/icon.png">
</d2-page-cover>
</d2-container>
</template>
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
export default {
data () {
return {
pubSetting: {
height: '90%'
}
}
}
}
<template>
<d2-container>
<template slot="header">一般</template>
<div class="inner">
<ve-bar :data="chartData" v-bind="pubSetting"></ve-bar>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">指定指标维度</template>
<div class="inner">
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
dimension: ['日期'],
metrics: ['访问用户']
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">排序条形图</template>
<div class="inner">
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
metrics: ['访问用户'],
dataOrder: {
label: '访问用户',
order: 'desc'
}
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">堆叠条形图</template>
<div class="inner">
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
stack: {
'xxx': ['访问用户', '下单用户']
}
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">纵轴为连续的数值轴</template>
<div class="inner">
<ve-bar :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-bar>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
yAxisType: 'value'
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': 1, '访问用户': 1393 },
{ '日期': 2, '访问用户': 3530 },
{ '日期': 5, '访问用户': 2923 },
{ '日期': 10, '访问用户': 1723 },
{ '日期': 15, '访问用户': 3792 },
{ '日期': 36, '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">一般</template>
<div class="inner">
<ve-candle :data="chartData" v-bind="pubSetting"></ve-candle>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
rows: [
{ '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },
{ '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },
{ '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },
{ '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },
{ '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },
{ '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },
{ '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },
{ '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },
{ '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },
{ '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },
{ '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },
{ '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },
{ '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },
{ '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },
{ '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },
{ '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },
{ '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },
{ '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },
{ '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },
{ '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },
{ '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },
{ '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },
{ '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },
{ '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },
{ '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },
{ '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },
{ '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },
{ '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },
{ '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },
{ '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },
{ '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },
{ '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },
{ '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },
{ '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },
{ '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },
{ '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },
{ '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },
{ '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">显示 MA VOL</template>
<div class="inner">
<ve-candle :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-candle>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
showMA: true,
showVol: true
}
return {
chartData: {
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
rows: [
{ '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },
{ '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },
{ '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },
{ '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },
{ '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },
{ '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },
{ '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },
{ '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },
{ '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },
{ '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },
{ '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },
{ '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },
{ '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },
{ '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },
{ '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },
{ '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },
{ '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },
{ '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },
{ '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },
{ '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },
{ '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },
{ '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },
{ '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },
{ '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },
{ '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },
{ '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },
{ '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },
{ '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },
{ '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },
{ '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },
{ '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },
{ '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },
{ '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },
{ '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },
{ '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },
{ '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },
{ '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },
{ '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">修改指标名和图例文字</template>
<div class="inner">
<ve-candle :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-candle>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
showMA: true,
showVol: true,
labelMap: {
MA5: 'ma5'
},
legendName: {
'日K': 'day k'
},
showDataZoom: true
}
return {
chartData: {
columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
rows: [
{ '日期': '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },
{ '日期': '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },
{ '日期': '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },
{ '日期': '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },
{ '日期': '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },
{ '日期': '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },
{ '日期': '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },
{ '日期': '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },
{ '日期': '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },
{ '日期': '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },
{ '日期': '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },
{ '日期': '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },
{ '日期': '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },
{ '日期': '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },
{ '日期': '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },
{ '日期': '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },
{ '日期': '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },
{ '日期': '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },
{ '日期': '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },
{ '日期': '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },
{ '日期': '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },
{ '日期': '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },
{ '日期': '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },
{ '日期': '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },
{ '日期': '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },
{ '日期': '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },
{ '日期': '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },
{ '日期': '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },
{ '日期': '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },
{ '日期': '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },
{ '日期': '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },
{ '日期': '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },
{ '日期': '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },
{ '日期': '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },
{ '日期': '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },
{ '日期': '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },
{ '日期': '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },
{ '日期': '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">一般</template>
<div class="inner">
<ve-funnel :data="chartData" v-bind="pubSetting"></ve-funnel>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['状态', '数值'],
rows: [
{ '状态': '展示', '数值': 900 },
{ '状态': '访问', '数值': 600 },
{ '状态': '点击', '数值': 300 },
{ '状态': '订单', '数值': 100 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">金字塔</template>
<div class="inner">
<ve-funnel :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-funnel>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
ascending: true
}
return {
chartData: {
columns: ['状态', '数值'],
rows: [
{ '状态': '展示', '数值': 900 },
{ '状态': '访问', '数值': 600 },
{ '状态': '点击', '数值': 300 },
{ '状态': '订单', '数值': 100 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">一般</template>
<div class="inner">
<ve-gauge :data="chartData" v-bind="pubSetting"></ve-gauge>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['type', 'a', 'b', 'value'],
rows: [
{ type: '速度', value: 80, a: 1, b: 2 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">一般</template>
<div class="inner">
<ve-heatmap :data="chartData" v-bind="pubSetting"></ve-heatmap>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['时间', '地点', '人数'],
rows: [
{ '时间': '星期一', '地点': '北京', '人数': 1000 },
{ '时间': '星期二', '地点': '上海', '人数': 400 },
{ '时间': '星期三', '地点': '杭州', '人数': 800 },
{ '时间': '星期二', '地点': '深圳', '人数': 200 },
{ '时间': '星期三', '地点': '长春', '人数': 100 },
{ '时间': '星期五', '地点': '南京', '人数': 300 },
{ '时间': '星期四', '地点': '江苏', '人数': 800 },
{ '时间': '星期一', '地点': '北京', '人数': 700 },
{ '时间': '星期三', '地点': '上海', '人数': 300 },
{ '时间': '星期二', '地点': '杭州', '人数': 500 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">地图热力图</template>
<div class="inner">
<ve-heatmap :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-heatmap>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
position: 'china',
type: 'map',
geo: {
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
}
return {
chartData: {
columns: ['lat', 'lng', '人数'],
rows: [
{ 'lat': 115.892151, 'lng': 28.676493, '人数': 1000 },
{ 'lat': 117.000923, 'lng': 36.675807, '人数': 400 },
{ 'lat': 113.665412, 'lng': 34.757975, '人数': 800 },
{ 'lat': 114.298572, 'lng': 30.584355, '人数': 200 },
{ 'lat': 112.982279, 'lng': 28.19409, '人数': 100 },
{ 'lat': 113.280637, 'lng': 23.125178, '人数': 300 },
{ 'lat': 110.33119, 'lng': 20.031971, '人数': 800 },
{ 'lat': 104.065735, 'lng': 30.659462, '人数': 700 },
{ 'lat': 108.948024, 'lng': 34.263161, '人数': 300 },
{ 'lat': 103.823557, 'lng': 36.058039, '人数': 500 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">一般</template>
<div class="inner">
<ve-histogram :data="chartData" v-bind="pubSetting"></ve-histogram>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">设置显示的指标维度</template>
<div class="inner">
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
metrics: ['访问用户', '下单用户'],
dimension: ['日期']
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">柱状图+折线图</template>
<div class="inner">
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
showLine: ['下单用户']
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">堆叠柱状图</template>
<div class="inner">
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
stack: { '用户': ['访问用户', '下单用户'] }
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">默认显示柱状图数据</template>
<div class="inner">
<ve-histogram :data="chartData" :extend="extend" v-bind="pubSetting"></ve-histogram>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.extend = {
series: {
label: { show: true, position: 'top' }
}
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">横轴为连续的数值轴</template>
<div class="inner">
<ve-histogram :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-histogram>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
xAxisType: 'value'
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': 1, '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': 2, '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': 5, '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': 10, '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': 20, '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': 22, '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">一般</template>
<div class="inner">
<ve-line :data="chartData" v-bind="pubSetting"></ve-line>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data: function () {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">横坐标的倾斜</template>
<div class="inner">
<ve-line :data="chartData" :extend="extend" v-bind="pubSetting"></ve-line>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data: function () {
this.extend = {
'xAxis.0.axisLabel.rotate': 45
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 },
{ '日期': '1/7', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/8', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/9', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/10', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/11', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/12', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">堆叠面积图</template>
<div class="inner">
<ve-line :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-line>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
stack: { '用户': ['访问用户', '下单用户'] },
area: true
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">显示指标数值</template>
<div class="inner">
<ve-line :data="chartData" :extend="extend" v-bind="pubSetting"></ve-line>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.extend = {
series: {
label: {
normal: {
show: true
}
}
}
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">设置别名</template>
<div class="inner">
<ve-line :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-line>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
labelMap: {
'PV': '访问用户',
'Order': '下单用户'
},
legendName: {
'访问用户': '访问用户 total: 10000'
}
}
return {
chartData: {
columns: ['date', 'PV', 'Order', 'OrderRate'],
rows: [
{ 'date': '1/1', 'PV': 1393, 'Order': 1093, 'OrderRate': 0.32 },
{ 'date': '1/2', 'PV': 3530, 'Order': 3230, 'OrderRate': 0.26 },
{ 'date': '1/3', 'PV': 2923, 'Order': 2623, 'OrderRate': 0.76 },
{ 'date': '1/4', 'PV': 1723, 'Order': 1423, 'OrderRate': 0.49 },
{ 'date': '1/5', 'PV': 3792, 'Order': 3492, 'OrderRate': 0.323 },
{ 'date': '1/6', 'PV': 4593, 'Order': 4293, 'OrderRate': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">一般</template>
<div class="inner">
<ve-map :data="chartData" v-bind="pubSetting" :settings="chartSettings"></ve-map>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
import mapOrigin from '@/pages/demo/charts/list/_data/china'
export default {
mixins: [
list
],
data () {
return {
chartSettings: {
mapOrigin
},
chartData: {
columns: ['位置', '税收', '人口', '面积'],
rows: [
{ '位置': '吉林', '税收': 123, '人口': 123, '面积': 92134 },
{ '位置': '北京', '税收': 1223, '人口': 2123, '面积': 29234 },
{ '位置': '上海', '税收': 2123, '人口': 1243, '面积': 94234 },
{ '位置': '浙江', '税收': 4123, '人口': 5123, '面积': 29234 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">设置城市</template>
<div class="inner">
<ve-map :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-map>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
import mapOrigin from '@/pages/demo/charts/list/_data/beijing'
export default {
mixins: [
list
],
data () {
return {
chartSettings: {
position: 'province/beijing',
mapOrigin
},
chartData: {
columns: ['位置', '人口'],
rows: [
{ '位置': '延庆区', '人口': 123 },
{ '位置': '密云区', '人口': 1223 },
{ '位置': '平谷区', '人口': 2123 },
{ '位置': '海淀区', '人口': 4123 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">设置样式</template>
<div class="inner">
<ve-map :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-map>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
import mapOrigin from '@/pages/demo/charts/list/_data/china'
export default {
mixins: [
list
],
data () {
return {
chartSettings: {
position: 'china',
mapOrigin,
label: false,
itemStyle: {
normal: {
borderColor: '#00f'
}
},
zoom: 1.2
},
chartData: {
columns: ['位置', '人口'],
rows: [
{ '位置': '吉林', ' 人口': 123 },
{ '位置': '北京', ' 人口': 1223 },
{ '位置': '上海', ' 人口': 2123 },
{ '位置': '浙江', ' 人口': 4123 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">一般</template>
<div class="inner">
<ve-pie :data="chartData" v-bind="pubSetting"></ve-pie>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">设置指标维度</template>
<div class="inner">
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
dimension: '日期',
metrics: '访问用户'
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">玫瑰图</template>
<div class="inner">
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
roseType: 'radius'
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">限制显示条数饼图</template>
<div class="inner">
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
limitShowNum: 5
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">多圆饼图</template>
<div class="inner">
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
level: [
['1/1', '1/2', '1/3'],
['1/4', '1/5']
]
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">设置饼图半径边距</template>
<div class="inner">
<ve-pie :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
radius: 150,
offsetY: 250
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">一般</template>
<div class="inner">
<ve-radar :data="chartData" v-bind="pubSetting"></ve-radar>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">一般</template>
<div class="inner">
<ve-ring :data="chartData" v-bind="pubSetting"></ve-ring>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">指定指标维度</template>
<div class="inner">
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
dimension: '日期',
metrics: '访问用户'
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">玫瑰图</template>
<div class="inner">
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
roseType: 'radius'
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">限制显示条数环图</template>
<div class="inner">
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
limitShowNum: 3
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">设置环图半径</template>
<div class="inner">
<ve-ring :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-ring>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
radius: [30, 100],
offsetY: 250
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">一般</template>
<div class="inner">
<ve-sankey :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-sankey>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
links: [
{ source: '首页', target: '列表页a', value: 0.5 },
{ source: '首页', target: '列表页b', value: 0.5 },
{ source: '列表页a', target: '内容页a-1', value: 0.1 },
{ source: '列表页a', target: '内容页a-2', value: 0.4 },
{ source: '列表页b', target: '内容页b-1', value: 0.2 },
{ source: '列表页b', target: '内容页b-2', value: 0.3 }
]
}
return {
chartData: {
columns: ['页面', '访问量'],
rows: [
{ '页面': '首页', '访问量': 100000 },
{ '页面': '列表页a', '访问量': 20000 },
{ '页面': '列表页b', '访问量': 80000 },
{ '页面': '内容页a-1', '访问量': 10000 },
{ '页面': '内容页a-2', '访问量': 10000 },
{ '页面': '内容页b-1', '访问量': 60000 },
{ '页面': '内容页b-2', '访问量': 20000 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">单维度多指标</template>
<div class="inner">
<ve-scatter :data="chartData" v-bind="pubSetting"></ve-scatter>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '年龄'],
rows: [
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
{ '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
{ '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },
{ '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
{ '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
{ '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">双维度多指标</template>
<div class="inner">
<ve-scatter :data="chartData" v-bind="pubSetting"></ve-scatter>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '年龄'],
rows: {
'上海': [
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
{ '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
{ '日期': '1/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },
{ '日期': '1/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
{ '日期': '1/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
{ '日期': '1/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }
],
'北京': [
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
{ '日期': '1/2', '访问用户': 1273, '年龄': 6, '下单用户': 2344 },
{ '日期': '1/3', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
{ '日期': '1/4', '访问用户': 2123, '年龄': 9, '下单用户': 3245 },
{ '日期': '1/5', '访问用户': 4103, '年龄': 12, '下单用户': 4355 },
{ '日期': '1/6', '访问用户': 7123, '年龄': 10, '下单用户': 3567 }
],
'广州': [
{ '日期': '1/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
{ '日期': '1/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
{ '日期': '1/3', '访问用户': 2123, '年龄': 30, '下单用户': 3245 },
{ '日期': '1/5', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
{ '日期': '1/4', '访问用户': 5123, '年龄': 18, '下单用户': 4564 },
{ '日期': '1/6', '访问用户': 3843, '年龄': 30, '下单用户': 4850 }
]
}
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
<template>
<d2-container>
<template slot="header">径向树图</template>
<div class="inner">
<ve-tree :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-tree>
</div>
<template slot="footer">
<d2-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
</template>
</d2-container>
</template>
<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'
export default {
mixins: [
list
],
data () {
this.chartSettings = {
seriesMap: {
tree1: {
layout: 'radial'
}
}
}
return {
chartData: {
columns: ['name', 'value'],
rows: [
{
name: 'tree1',
value: [
{
name: 'f',
value: 1,
link: 'https://ele.me',
children: [
{
name: 'a',
value: 1,
link: 'https://ele.me',
children: [
{
name: 'a-a',
link: 'https://ele.me',
value: 2
},
{
name: 'a-b',
link: 'https://ele.me',
value: 2
}
]
},
{
name: 'b',
value: 1,
link: 'https://ele.me',
children: [
{
name: 'b-a',
link: 'https://ele.me',
value: 2
},
{
name: 'b-b',
link: 'https://ele.me',
value: 2
}
]
},
{
name: 'c',
value: 3,
link: 'https://ele.me',
children: [
{
name: 'c-a',
link: 'https://ele.me',
value: 4
},
{
name: 'c-b',
link: 'https://ele.me',
value: 2
}
]
},
{
name: 'd',
value: 3,
link: 'https://ele.me',
children: [
{
name: 'd-a',
link: 'https://ele.me',
value: 4
},
{
name: 'd-b',
link: 'https://ele.me',
value: 2
}
]
}
]
}
]
}
]
}
}
}
}
</script>
<style lang="scss" scoped>
.inner {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
</style>
This diff is collapsed.
<template>
<d2-container type="card" better-scroll>
<template slot="header">Header</template>
<d2-demo-article/>
<template slot="footer">Footer</template>
</d2-container>
</template>
<script>
import d2DemoArticle from './components/d2-demo-article'
export default {
components: {
'd2-demo-article': d2DemoArticle
}
}
</script>
This diff is collapsed.
<template>
<d2-container type="card">
<d2-demo-article/>
</d2-container>
</template>
<script>
import d2DemoArticle from './components/d2-demo-article'
export default {
components: {
'd2-demo-article': d2DemoArticle
}
}
</script>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment