javascript/vueecharts
1
0
Fork 0
mirror of https://github.com/ecomfe/vue-echarts.git synced 2025-08-15 11:55:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

add theme demo

Browse Source
This commit is contained in:
Justineo
2016-07-15 17:25:11 +08:00
parent e4777801b7
commit 495ec68c57
4 changed files with 157 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
demo/Demo.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<h1><a href="https://github.com/Justineo/vue-echarts">Vue-ECharts</a></h1> <h1><a href="https://github.com/Justineo/vue-echarts">Vue-ECharts</a></h1>
<chart :options="polar"></chart> <chart :options="polar" theme="vue-echarts"></chart>
<chart :options="bar" v-ref:bar></chart> <chart :options="bar" v-ref:bar theme="dark"></chart>
</template> </template>
<style> <style>
@ -32,6 +32,13 @@ body .echarts {
</style> </style>
<script> <script>
import ECharts from '../src/components/ECharts.vue'
import 'echarts/theme/dark'
import theme from './theme'
// registering custom theme
ECharts.registerTheme('vue-echarts', theme)
let asyncData = { let asyncData = {
categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
data: [5, 20, 36, 10, 10, 20] data: [5, 20, 36, 10, 10, 20]

38
demo/bundle.js
View File

File diff suppressed because one or more lines are too long

119
demo/theme.js Normal file
View File

@ -0,0 +1,119 @@
export default {
"seriesCnt": "3",
"backgroundColor": "#ccc",
"titleColor": "#333",
"subtitleColor": "#666",
"textColorShow": false,
"textColor": "#666",
"markTextColor": "#666",
"color": [
"#45c231",
"#29a19b",
"#8461a8"
],
"borderColor": "#999",
"borderWidth": "0",
"visualMapColor": [
"#4bc7a3",
"#73aed8",
"#f6e9a6"
],
"legendTextColor": "#999",
"axes": [
{
"type": "all",
"name": "通用坐标轴",
"axisLineShow": true,
"axisLineColor": "#999",
"axisTickShow": true,
"axisTickColor": "#999",
"axisLabelShow": true,
"axisLabelColor": "#999",
"splitLineShow": true,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "category",
"name": "类目坐标轴",
"axisLineShow": true,
"axisLineColor": "#999",
"axisTickShow": true,
"axisTickColor": "#999",
"axisLabelShow": true,
"axisLabelColor": "#999",
"splitLineShow": false,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "value",
"name": "数值坐标轴",
"axisLineShow": true,
"axisLineColor": "#999",
"axisTickShow": true,
"axisTickColor": "#999",
"axisLabelShow": true,
"axisLabelColor": "#999",
"splitLineShow": true,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "log",
"name": "对数坐标轴",
"axisLineShow": true,
"axisLineColor": "#999",
"axisTickShow": true,
"axisTickColor": "#999",
"axisLabelShow": true,
"axisLabelColor": "#aaa",
"splitLineShow": true,
"splitLineColor": [
"#888888"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "time",
"name": "时间坐标轴",
"axisLineShow": true,
"axisLineColor": "#333",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": true,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
]
}

10
webpack.config.js
View File

@ -9,6 +9,11 @@ var demo = {
{ {
test: /\.vue$/, test: /\.vue$/,
loader: 'vue' loader: 'vue'
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?presets[]=es2015'
} }
] ]
}, },
@ -32,6 +37,11 @@ var build = {
{ {
test: /\.vue$/, test: /\.vue$/,
loader: 'vue' loader: 'vue'
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?presets[]=es2015'
} }
] ]
}, },