初始化
This commit is contained in:
asd
107
src/components/ECharts/lineEcharts.vue
Normal file
107
src/components/ECharts/lineEcharts.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :style="{width: width, height: height}"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import westeros from './theme/westeros'
|
||||
export default {
|
||||
name: 'lineEcharts',
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'myChart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id),'westeros')
|
||||
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: '折线图堆叠'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一','周二','周三','周四','周五','周六','周日']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'邮件营销',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:[8200, 6320, 5010, 4340, 3400, 2300, 1100]
|
||||
},
|
||||
{
|
||||
name:'联盟广告',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:[2200, 3820, 1910, 2340, 4900, 3300, 1100]
|
||||
},
|
||||
{
|
||||
name:'视频广告',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:[2500, 4302, 5010, 2540, 6900, 5300, 6410]
|
||||
},
|
||||
{
|
||||
name:'直接访问',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:[5320, 7332, 9301, 6334, 5390, 4330, 1320]
|
||||
},
|
||||
{
|
||||
name:'搜索引擎',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:[8820, 1932, 5901, 7304, 2900, 3300, 8200]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
514
src/components/ECharts/theme/westeros.js
Normal file
514
src/components/ECharts/theme/westeros.js
Normal file
@@ -0,0 +1,514 @@
|
||||
import echarts from 'echarts'
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory);
|
||||
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, echarts);
|
||||
}
|
||||
}(this, function (exports, echarts) {
|
||||
var log = function (msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg);
|
||||
}
|
||||
};
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded');
|
||||
return;
|
||||
}
|
||||
echarts.registerTheme('westeros', {
|
||||
"color": [
|
||||
"#409eff",
|
||||
"#59c4e6",
|
||||
"#edafda",
|
||||
"#93b7e3",
|
||||
"#a5e7f0",
|
||||
"#cbb0e3"
|
||||
],
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"textStyle": {},
|
||||
"title": {
|
||||
"textStyle": {
|
||||
"color": "#409eff"
|
||||
},
|
||||
"subtextStyle": {
|
||||
"color": "#93b7e3"
|
||||
}
|
||||
},
|
||||
"line": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": "2"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "2"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true
|
||||
},
|
||||
"radar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": "2"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "2"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true
|
||||
},
|
||||
"bar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"pie": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"scatter": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"boxplot": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"parallel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"sankey": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"funnel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"gauge": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"candlestick": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#edafda",
|
||||
"color0": "transparent",
|
||||
"borderColor": "#d680bc",
|
||||
"borderColor0": "#8fd3e8",
|
||||
"borderWidth": "2"
|
||||
}
|
||||
}
|
||||
},
|
||||
"graph": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": 1,
|
||||
"color": "#aaa"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true,
|
||||
"color": [
|
||||
"#409eff",
|
||||
"#59c4e6",
|
||||
"#edafda",
|
||||
"#93b7e3",
|
||||
"#a5e7f0",
|
||||
"#cbb0e3"
|
||||
],
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"map": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#f3f3f3",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(165,231,240,1)",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#000"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(81,107,145)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"geo": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#f3f3f3",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(165,231,240,1)",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#000"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(81,107,145)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"categoryAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"valueAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"logAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"toolbox": {
|
||||
"iconStyle": {
|
||||
"normal": {
|
||||
"borderColor": "#999"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderColor": "#666"
|
||||
}
|
||||
}
|
||||
},
|
||||
"legend": {
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"axisPointer": {
|
||||
"lineStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
},
|
||||
"crossStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeline": {
|
||||
"lineStyle": {
|
||||
"color": "#8fd3e8",
|
||||
"width": 1
|
||||
},
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#8fd3e8",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
},
|
||||
"controlStyle": {
|
||||
"normal": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "#8fd3e8",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "#8fd3e8",
|
||||
"borderWidth": 0.5
|
||||
}
|
||||
},
|
||||
"checkpointStyle": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "rgba(138,124,168,0.37)"
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"visualMap": {
|
||||
"color": [
|
||||
"#516b91",
|
||||
"#59c4e6",
|
||||
"#a5e7f0"
|
||||
]
|
||||
},
|
||||
"dataZoom": {
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"dataBackgroundColor": "rgba(255,255,255,0.3)",
|
||||
"fillerColor": "rgba(167,183,204,0.4)",
|
||||
"handleColor": "#a7b7cc",
|
||||
"handleSize": "100%",
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"markPoint": {
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}));
|
||||
|
||||
168
src/components/ECharts/theme/westeros.project.json
Normal file
168
src/components/ECharts/theme/westeros.project.json
Normal file
@@ -0,0 +1,168 @@
|
||||
{
|
||||
"version": 1,
|
||||
"themeName": "westeros",
|
||||
"theme": {
|
||||
"seriesCnt": "4",
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"titleColor": "#409eff",
|
||||
"subtitleColor": "#93b7e3",
|
||||
"textColorShow": false,
|
||||
"textColor": "#333",
|
||||
"markTextColor": "#eee",
|
||||
"color": [
|
||||
"#409eff",
|
||||
"#59c4e6",
|
||||
"#edafda",
|
||||
"#93b7e3",
|
||||
"#a5e7f0",
|
||||
"#cbb0e3"
|
||||
],
|
||||
"borderColor": "#ccc",
|
||||
"borderWidth": 0,
|
||||
"visualMapColor": [
|
||||
"#516b91",
|
||||
"#59c4e6",
|
||||
"#a5e7f0"
|
||||
],
|
||||
"legendTextColor": "#999999",
|
||||
"kColor": "#edafda",
|
||||
"kColor0": "transparent",
|
||||
"kBorderColor": "#d680bc",
|
||||
"kBorderColor0": "#8fd3e8",
|
||||
"kBorderWidth": "2",
|
||||
"lineWidth": "2",
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"symbolBorderWidth": "2",
|
||||
"lineSmooth": true,
|
||||
"graphLineWidth": 1,
|
||||
"graphLineColor": "#aaa",
|
||||
"mapLabelColor": "#000",
|
||||
"mapLabelColorE": "rgb(81,107,145)",
|
||||
"mapBorderColor": "#516b91",
|
||||
"mapBorderColorE": "#516b91",
|
||||
"mapBorderWidth": 0.5,
|
||||
"mapBorderWidthE": 1,
|
||||
"mapAreaColor": "#f3f3f3",
|
||||
"mapAreaColorE": "rgba(165,231,240,1)",
|
||||
"axes": [
|
||||
{
|
||||
"type": "all",
|
||||
"name": "通用坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#cccccc",
|
||||
"axisTickShow": false,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#999999",
|
||||
"splitLineShow": true,
|
||||
"splitLineColor": [
|
||||
"#eeeeee"
|
||||
],
|
||||
"splitAreaShow": false,
|
||||
"splitAreaColor": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "category",
|
||||
"name": "类目坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#333",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#333",
|
||||
"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": "#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)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "log",
|
||||
"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)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"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)"
|
||||
]
|
||||
}
|
||||
],
|
||||
"axisSeperateSetting": false,
|
||||
"toolboxColor": "#999",
|
||||
"toolboxEmpasisColor": "#666",
|
||||
"tooltipAxisColor": "#ccc",
|
||||
"tooltipAxisWidth": 1,
|
||||
"timelineLineColor": "#8fd3e8",
|
||||
"timelineLineWidth": 1,
|
||||
"timelineItemColor": "#8fd3e8",
|
||||
"timelineItemColorE": "#8fd3e8",
|
||||
"timelineCheckColor": "#8fd3e8",
|
||||
"timelineCheckBorderColor": "rgba(138,124,168,0.37)",
|
||||
"timelineItemBorderWidth": 1,
|
||||
"timelineControlColor": "#8fd3e8",
|
||||
"timelineControlBorderColor": "#8fd3e8",
|
||||
"timelineControlBorderWidth": 0.5,
|
||||
"timelineLabelColor": "#8fd3e8",
|
||||
"datazoomBackgroundColor": "rgba(0,0,0,0)",
|
||||
"datazoomDataColor": "rgba(255,255,255,0.3)",
|
||||
"datazoomFillColor": "rgba(167,183,204,0.4)",
|
||||
"datazoomHandleColor": "#a7b7cc",
|
||||
"datazoomHandleWidth": "100",
|
||||
"datazoomLabelColor": "#333"
|
||||
}
|
||||
}
|
||||
53
src/components/lang/langSelect.vue
Normal file
53
src/components/lang/langSelect.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<el-dropdown class='international' @command="handleSetLanguage">
|
||||
<div>
|
||||
<span class="el-dropdown-link"><i class="fa fa-language fa-lg"></i> {{language}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="cn">中文</el-dropdown-item>
|
||||
<el-dropdown-item command="en">English</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'langSelect',
|
||||
data () {
|
||||
return {
|
||||
language: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const _lang = localStorage.lang || 'cn'
|
||||
this.getLanguage(_lang)
|
||||
},
|
||||
methods: {
|
||||
handleSetLanguage (lang) {
|
||||
this.$i18n.locale = lang
|
||||
localStorage.setItem('lang', lang)
|
||||
this.getLanguage(lang)
|
||||
},
|
||||
getLanguage (val) {
|
||||
if (val === 'cn') {
|
||||
this.language = '中文'
|
||||
}
|
||||
if (val === 'en') {
|
||||
this.language = 'English'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.international .el-dropdown-link { cursor: pointer; color: #666666; font-size: 14px; }
|
||||
.el-icon-arrow-down { font-size: 14px; }
|
||||
</style>
|
||||
<style scoped>
|
||||
.international-icon {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
vertical-align: -5px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
180
src/components/markdown/config.editor.js
Normal file
180
src/components/markdown/config.editor.js
Normal file
@@ -0,0 +1,180 @@
|
||||
const defaultConfig = {
|
||||
width: '100%',
|
||||
height: 600,
|
||||
path: './static/markdown/lib/',
|
||||
// theme: 'dark',
|
||||
previewTheme: 'default',
|
||||
editorTheme: 'pastel-on-dark',
|
||||
// markdown: '默认填充内容', // 默认填充内容
|
||||
lineWrapping: true, // 编辑框不换行
|
||||
codeFold: true, // 代码折叠
|
||||
placeholder: '请输入...',
|
||||
syncScrolling: true,
|
||||
saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
|
||||
searchReplace: true,
|
||||
watch: true, // 实时预览
|
||||
// htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
|
||||
toolbar: true, // 工具栏
|
||||
previewCodeHighlight: true, // 预览 HTML 的代码块高亮，默认开启
|
||||
emoji: true,
|
||||
taskList: true,
|
||||
tocm: true, // Using [TOCM]
|
||||
tex: true, // 开启科学公式TeX语言支持，默认关闭
|
||||
flowChart: true, // 开启流程图支持，默认关闭
|
||||
sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
|
||||
// dialogLockScreen: false, // 设置弹出层对话框不锁屏，全局通用，默认为true
|
||||
// dialogShowMask: false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
|
||||
// dialogDraggable: false, // 设置弹出层对话框不可拖动，全局通用，默认为true
|
||||
// dialogMaskOpacity: 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
|
||||
// dialogMaskBgColor: "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
|
||||
imageUpload: true,
|
||||
imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'],
|
||||
imageUploadURL: '../../assets/uploadImage'
|
||||
// onload: function() {
|
||||
// // this.fullscreen();
|
||||
// // this.unwatch();
|
||||
// // this.watch().fullscreen();
|
||||
// // this.setMarkdown("#PHP");
|
||||
// // this.width("100%");
|
||||
// // this.height(480);
|
||||
// // this.resize("100%", 640);
|
||||
// },
|
||||
}
|
||||
const codeThemes = [
|
||||
{
|
||||
label: 'monokai',
|
||||
value: 'monokai.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-cave-dark',
|
||||
value: 'atelier-cave-dark.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-cave-light',
|
||||
value: 'atelier-cave-light.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-dune-dark',
|
||||
value: 'atelier-dune-dark.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-dune-light',
|
||||
value: 'atelier-dune-light.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-estuary-dark',
|
||||
value: 'atelier-estuary-dark.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-estuary-light',
|
||||
value: 'atelier-estuary-light.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-forest-dark',
|
||||
value: 'atelier-forest-dark.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-forest-light',
|
||||
value: 'atelier-forest-light.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-heath-dark',
|
||||
value: 'atelier-heath-dark.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-heath-light',
|
||||
value: 'atelier-heath-light.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-lakeside-dark',
|
||||
value: 'atelier-lakeside-dark.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-lakeside-light',
|
||||
value: 'atelier-lakeside-light.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-plateau-dark',
|
||||
value: 'atelier-plateau-dark.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-plateau-light',
|
||||
value: 'atelier-plateau-light.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-savanna-dark',
|
||||
value: 'atelier-savanna-dark.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-savanna-light',
|
||||
value: 'atelier-savanna-light.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-seaside-dark',
|
||||
value: 'atelier-seaside-dark.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-seaside-light',
|
||||
value: 'atelier-seaside-light.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-sulphurpool-dark',
|
||||
value: 'atelier-sulphurpool-dark.min.css'
|
||||
},
|
||||
{
|
||||
label: 'atelier-sulphurpool-light',
|
||||
value: 'atelier-sulphurpool-light.min.css'
|
||||
},
|
||||
{
|
||||
label: 'github',
|
||||
value: 'github.min.css'
|
||||
},
|
||||
{
|
||||
label: 'github-v2',
|
||||
value: 'github-v2.min.css'
|
||||
},
|
||||
{
|
||||
label: 'hemisu-dark',
|
||||
value: 'hemisu-dark.min.css'
|
||||
},
|
||||
{
|
||||
label: 'hemisu-light',
|
||||
value: 'hemisu-light.min.css'
|
||||
},
|
||||
{
|
||||
label: 'tomorrow',
|
||||
value: 'tomorrow.min.css'
|
||||
},
|
||||
{
|
||||
label: 'tomorrow-night',
|
||||
value: 'tomorrow-night.min.css'
|
||||
},
|
||||
{
|
||||
label: 'tomorrow-night-blue',
|
||||
value: 'tomorrow-night-blue.min.css'
|
||||
},
|
||||
{
|
||||
label: 'tomorrow-night-bright',
|
||||
value: 'tomorrow-night-bright.min.css'
|
||||
},
|
||||
{
|
||||
label: 'tomorrow-night-eighties',
|
||||
value: 'tomorrow-night-eighties.min.css'
|
||||
},
|
||||
{
|
||||
label: 'tranquil-heart',
|
||||
value: 'previewTheme-xu.css'
|
||||
},
|
||||
{
|
||||
label: 'vibrant-ink',
|
||||
value: 'vibrant-ink.min.css'
|
||||
},
|
||||
{
|
||||
label: 'pastel-on-dark-xu',
|
||||
value: 'pastel-on-dark-xu.css'
|
||||
}
|
||||
]
|
||||
export {
|
||||
defaultConfig,
|
||||
codeThemes
|
||||
}
|
||||
100
src/components/markdown/markdown-editor.vue
Normal file
100
src/components/markdown/markdown-editor.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="markdownBox">
|
||||
<link rel="stylesheet" href="./static/markdown/css/editormd.min.css">
|
||||
<link rel="stylesheet" href="./static/markdown/css/googleCodePrettifyThemes/previewTheme-xu.css">
|
||||
<div :id="editorId"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scriptjs from 'scriptjs'
|
||||
import { defaultConfig, codeThemes } from './config.editor'
|
||||
export default {
|
||||
name: 'markdown-editor',
|
||||
props: {
|
||||
editorId: {
|
||||
'type': String,
|
||||
'default': 'markdown-editor'
|
||||
},
|
||||
onchange: { // 内容改变时回调，返回（html, markdown, text）
|
||||
type: Function
|
||||
},
|
||||
config: { // 编辑器配置
|
||||
type: Object
|
||||
},
|
||||
codeTheme: { // 代码高亮主题
|
||||
'type': String,
|
||||
'default': 'vibrant-ink.min.css'
|
||||
},
|
||||
initData: {
|
||||
'type': String
|
||||
},
|
||||
initDataDelay: {
|
||||
'type': Number, // 延迟初始化数据时间，单位毫秒
|
||||
'default': 0
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
editor: null,
|
||||
codeThemes,
|
||||
editorLoaded: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchScript: function (url) {
|
||||
return new Promise((resolve) => {
|
||||
scriptjs(url, () => {
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
getConfig: function () {
|
||||
return {...defaultConfig, ...this.config }
|
||||
},
|
||||
setMarkdown: function (val) {
|
||||
let editor = window.editormd(this.editorId, this.getConfig())
|
||||
editor.setMarkdown(val)
|
||||
},
|
||||
initEditor: function () {
|
||||
(async () => {
|
||||
await this.fetchScript('./static/markdown/jquery.min.js')
|
||||
await this.fetchScript('./static/markdown/editormd.min.js')
|
||||
// await this.fetchScript('./static/editor.md/editormd.js');
|
||||
this.$nextTick(() => {
|
||||
let editor = window.editormd(this.editorId, this.getConfig())
|
||||
editor.on('load', () => {
|
||||
setTimeout(() => { // hack bug: 一个页面多个编辑器只能初始化其中一个数据问题
|
||||
this.editorLoaded = true
|
||||
this.initData && editor.setMarkdown(this.initData)
|
||||
}, this.initDataDelay)
|
||||
})
|
||||
this.onchange && editor.on('change', () => {
|
||||
let html = editor.getPreviewedHTML()
|
||||
this.onchange({
|
||||
markdown: editor.getMarkdown(),
|
||||
html: html,
|
||||
text: window.$(html).text()
|
||||
})
|
||||
})
|
||||
this.editor = editor
|
||||
})
|
||||
})()
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.initEditor()
|
||||
},
|
||||
watch: {
|
||||
'initData': function (newVal) {
|
||||
if (newVal) {
|
||||
this.editorLoaded && this.editor.setMarkdown(newVal)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user