Skip to content

Instantly share code, notes, and snippets.

@qiukun

qiukun/end2end.markdown

Last active December 18, 2019 07:34
Show Gist options
  • Save qiukun/36f65bfebb48d1dfc298238b1c83afe7 to your computer and use it in GitHub Desktop.
Save qiukun/36f65bfebb48d1dfc298238b1c83afe7 to your computer and use it in GitHub Desktop.
Download ZIP
End2End
Raw
index.html
<!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>
Raw
script.js
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);
Raw
scripts
<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