Last active
December 18, 2019 07:34
-
-
Save qiukun/36f65bfebb48d1dfc298238b1c83afe7 to your computer and use it in GitHub Desktop.
End2End
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> | |
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> | |
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> | |
<script src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.min.js"></script> | |
</head> | |
<body> | |
<div id="main" style="width: 600px;height:400px;"></div> | |
<div id="app"> | |
<v-app> | |
<v-content> | |
<v-container>Hello world</v-container> | |
</v-content> | |
<v-card :height="CHeight" style="min-width:300px;"> | |
<v-tabs | |
v-model="CurrentTab" | |
color="cyan" | |
slider-color="yellow" | |
grow | |
> | |
<v-tab v-for="item in Tabs" :key="item">{{ item }}</v-tab> | |
</v-tabs> | |
<v-tabs-items v-model="CurrentTab"> | |
<v-tab-item v-for="(item,tindex) in Tabs" :key="item"> | |
<v-card flat> | |
<v-list dense style="min-width:300px;" v-for="(item,iindex) in CItems" :key="item.index"> | |
<template v-if="tindex===iindex"> | |
<v-list-tile v-for="it in item" :key="it.index" @click="selectNode(it,iindex)"> | |
<v-list-tile-content>{{it.text}}</v-list-tile-content> | |
</v-list-tile> | |
</template> | |
</v-list> | |
</v-card> | |
</v-tab-item> | |
</v-tabs-items> | |
</v-card> | |
</v-app> | |
</div> | |
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
new Vue({ | |
el: '#app', | |
vuetify: new Vuetify(), | |
}) | |
var myChart = echarts.init(document.getElementById('main')); | |
// 指定图表的配置项和数据 | |
var option = { | |
title: { | |
text: 'ECharts 入门示例' | |
}, | |
tooltip: {}, | |
legend: { | |
data:['销量'] | |
}, | |
xAxis: { | |
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] | |
}, | |
yAxis: {}, | |
series: [{ | |
name: '销量', | |
type: 'bar', | |
data: [5, 20, 36, 10, 10, 20] | |
}] | |
}; | |
// 使用刚指定的配置项和数据显示图表。 | |
myChart.setOption(option); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment