blob: 222c768a4d029f8642bba8a2747560bac61f759a [file] [log] [blame]
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=08cdd0d259"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
+ '@font-face {font-family:"noto-thin";src:local("Microsoft Yahei");}'
+ '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>主题编辑器 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 &nbsp;</p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">实例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">其他<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-ec5"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ECharts 5<span class="new">new</span><b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/next/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/next/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/next/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/next/examples/zh/index.html">实例</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('en')">EN</a></li><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo_white.png?_v_=20200710_1"></a></li></ul></div></div></nav><div class="page-main"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap-colorpicker@2.5.3/dist/css/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/styles/default.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/styles/github.css">
<link rel="stylesheet" href="./theme-builder/main.css">
<div id="theme-builder">
<div class="container-fluid" id="content">
<div class="row scroll-parent">
<div class="col-md-3 col-sm-4 theme-config">
<div id="acc-port" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#acc-port" href="#acc-port-body">功能</a>
</h4>
</div>
<div id="acc-port-body" class="panel-collapse collapse in">
<div class="panel-body">
<div class="port-row">
<input type="file" @change="importFileChanged" id="input-file" style="display: none" />
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" data-target="#download-js-modal" data-toggle="modal" @click="useTheme()">
<span class="glyphicon glyphicon-download-alt"></span>
下载主题
</button>
<button type="button" class="btn btn-default" @click="importJson()">
<span class="glyphicon glyphicon-import"></span>
导入配置
</button>
<button type="button" class="btn btn-default" @click="exportJson()">
<span class="glyphicon glyphicon-export"></span>
导出配置
</button>
</div>
</div>
<div class="port-row">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" @click="updateCharts(true)">
<span class="glyphicon glyphicon-refresh"></span>
刷新
</button>
<button type="button" class="btn btn-default" @click="newTheme()">
<span class="glyphicon glyphicon-repeat"></span>
复原
</button>
<button class="btn btn-default" data-toggle="modal" data-target="#download-modal">
<span class="glyphicon glyphicon-question-sign"></span>
帮助
</button>
</div>
</div>
<form class="form form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">主题名称</label>
<div class="col-sm-9">
<input class="form-control" v-model="themeName" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">系列数量</label>
<div class="col-sm-9">
<input type="number" class="form-control" v-model="theme.seriesCnt" />
</div>
</div>
</form>
<form class="form-horizontal">
<hr />
<h5>默认方案</h5>
<div class="row theme-plan-row">
<div class="col-xs-6" v-for="group in preDefinedThemes">
<a class="theme-plan-group"@click="selectPreDefinedTheme($index)" v-bind:style="{ backgroundColor: group.background }" title="{{ group.name }}">
<div class="theme-plan-color" v-for="color in group.theme" v-bind:style="{ backgroundColor: color }">
</div>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div><!-- end of acc-port -->
<div id="acc-theme" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#acc-theme" href="#acc-theme-body">基本配置</a>
</h4>
</div>
<div id="acc-theme-body" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-horizontal">
<config-color title="背景" :color.sync="theme.backgroundColor"></config-color>
<config-color title="标题" :color.sync="theme.titleColor"></config-color>
<config-color title="副标题" :color.sync="theme.subtitleColor"></config-color>
<config-color-list title="主题" :colors.sync="theme.color"></config-color-list>
<config-color title="标签文字" :color.sync="theme.markTextColor"></config-color>
<config-number title="描边粗细" :value.sync="theme.borderWidth"></config-number>
<config-color title="描边" :color.sync="theme.borderColor"></config-color>
</form>
</div>
</div>
</div>
</div><!-- end of acc-theme -->
<div id="acc-visualmap" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#acc-visualmap" href="#acc-visualmap-body">视觉映射</a>
</h4>
</div>
<div id="acc-visualmap-body" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-horizontal">
<config-color-list title="视觉映射" :colors.sync="theme.visualMapColor"></config-color-list>
</form>
</div>
</div>
</div>
</div><!-- end of acc-visualmap -->
<div id="acc-axis" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#acc-axis" href="#acc-axis-body">坐标轴</a>
</h4>
</div>
<div id="acc-axis-body" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<input v-model="theme.axisSeperateSetting" @change="axisSeperateSettingChanges()" type="checkbox" id="axisSeperateSetting" />
<label for="axisSeperateSetting" class="control-label">为不同类型坐标轴分别设置</label>
</div>
</div>
<div class="axis-group" v-for="axis in theme.axis" v-if="$index > 0 || !theme.axisSeperateSetting">
<h5 v-if="axis.type !== 'all'">{{ axis.name }}</h5>
<config-color can-disable :enabled.sync="axis.axisLineShow" title="轴线" :color.sync="axis.axisLineColor"></config-color>
<config-color can-disable :enabled.sync="axis.axisTickShow" title="刻度" :color.sync="axis.axisTickColor"></config-color>
<config-color-list can-disable :enabled.sync="axis.splitLineShow" title="网格" :colors.sync="axis.splitLineColor"></config-color-list>
<config-color-list can-disable :enabled.sync="axis.splitAreaShow" title="填充" :colors.sync="axis.splitAreaColor"></config-color-list>
<config-color can-disable :enabled.sync="axis.axisLabelShow" title="文字" :color.sync="axis.axisLabelColor"></config-color>
</div>
</form>
</div>
</div>
</div>
</div><!-- end of acc-axis -->
<div id="acc-legend" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#acc-legend" href="#acc-legend-body" title="legend">图例</a>
</h4>
</div>
<div id="acc-legend-body" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-horizontal">
<config-color :color.sync="theme.legendTextColor" title="文字"></config-color>
</form>
</div>
</div>
</div>
</div><!-- end of acc-legend -->
<div id="acc-toolbox" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#acc-toolbox" href="#acc-toolbox-body" title="toolbox">工具箱</a>
</h4>
</div>
<div id="acc-toolbox-body" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-horizontal">
<config-color :color.sync="theme.toolboxColor" title="图标"></config-color>
<config-color :color.sync="theme.toolboxEmphasisColor" title="悬停"></config-color>
</form>
</div>
</div>
</div>
</div><!-- end of acc-toolbox -->
<div id="acc-tooltip" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#acc-tooltip" href="#acc-tooltip-body" title="tooltip">提示框</a>
</h4>
</div>
<div id="acc-tooltip-body" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-horizontal">
<config-color :color.sync="theme.tooltipAxisColor" title="指示线"></config-color>
<config-number :value.sync="theme.tooltipAxisWidth" title="宽度"></config-number>
</form>
</div>
</div>
</div>
</div><!-- end of acc-tooltip -->
<div id="acc-timeline" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#acc-timeline" href="#acc-timeline-body" title="tooltip">时间轴</a>
</h4>
</div>
<div id="acc-timeline-body" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-horizontal">
<config-color title="标记" :color.sync="theme.timelineItemColor"></config-color>
<config-color title="标记悬停" :color.sync="theme.timelineItemColorE"></config-color>
<config-color title="标记选中" :color.sync="theme.timelineCheckColor"></config-color>
<config-color title="标记选中描边" :color.sync="theme.timelineCheckBorderColor"></config-color>
<config-number title="标记描边" :value.sync="theme.timelineItemBorderWidth"></config-number>
<config-color title="主轴" :color.sync="theme.timelineLineColor"></config-color>
<config-number title="主轴宽度" :value.sync="theme.timelineLineWidth"></config-number>
<config-color title="控件填充" :color.sync="theme.timelineControlColor"></config-color>
<config-color title="控件描边" :color.sync="theme.timelineControlBorderColor"></config-color>
<config-number title="控件描边宽度" :value.sync="theme.timelineControlBorderWidth"></config-number>
<config-color title="文字" :color.sync="theme.timelineLabelColor"></config-color>
</form>
</div>
</div>
</div>
</div><!-- end of acc-timeline -->
<div id="acc-datazoom" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#acc-datazoom" href="#acc-datazoom-body" title="tooltip">数据缩放</a>
</h4>
</div>
<div id="acc-datazoom-body" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-horizontal">
<config-color title="背景" :color.sync="theme.datazoomBackgroundColor"></config-color>
<config-color title="数据背景" :color.sync="theme.datazoomDataColor"></config-color>
<config-color title="填充" :color.sync="theme.datazoomFillColor"></config-color>
<config-color title="控制手柄" :color.sync="theme.datazoomHandleColor"></config-color>
<config-number title="控制手柄大小" :value.sync="theme.datazoomHandleWidth"></config-number>
<config-color title="文字" :color.sync="theme.datazoomLabelColor"></config-color>
</form>
</div>
</div>
</div>
</div><!-- end of acc-datazoom -->
<div id="acc-line" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#acc-line" href="#acc-line-body" title="line">折线图</a>
</h4>
</div>
<div id="acc-line-body" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<input type="checkbox" v-model="theme.lineSmooth" id="lineSmooth" />
<label for="lineSmooth" class="control-label" title="smooth">平滑曲线</label>
</div>
</div>
<config-number title="线条宽度" :value.sync="theme.lineWidth"></config-number>
<config-number title="图形描边" :value.sync="theme.symbolBorderWidth"></config-number>
<config-number title="图形大小" :value.sync="theme.symbolSize"></config-number>
<div class="form-group">
<div class="col-sm-3">
<label class="control-label">图形形状</label>
</div>
<div class="col-sm-12">
<div class="row space-row">
<div class="col-sm-6">
<input type="radio" name="symbol" id="symbolCircle" value="circle" @change="updateSymbol('circle')" />
<label for="symbolCircle">圆形</label>
</div>
<div class="col-sm-6">
<input type="radio" name="symbol" id="symbolCircleE" value="circle" checked @change="updateSymbol('emptyCircle')" />
<label for="symbolCircleE">空心圆形</label>
</div>
<div class="col-sm-6">
<input type="radio" name="symbol" id="symbolRect" value="rect" @change="updateSymbol('rect')" />
<label for="symbolRect">方形</label>
</div>
<div class="col-sm-6">
<input type="radio" name="symbol" id="symbolRectE" value="rect" @change="updateSymbol('emptyRect')" />
<label for="symbolRectE">空心方形</label>
</div>
<div class="col-sm-6">
<input type="radio" name="symbol" id="symbolRoundRect" value="roundRect" @change="updateSymbol('roundRect')" />
<label for="symbolRoundRect">圆角矩形</label>
</div>
<div class="col-sm-6">
<input type="radio" name="symbol" id="symbolRoundRectE" value="roundRect" @change="updateSymbol('emptyRoundRect')" />
<label for="symbolRoundRectE">空心圆角矩形</label>
</div>
<div class="col-sm-6">
<input type="radio" name="symbol" id="symbolTri" value="triangle" @change="updateSymbol('triangle')" />
<label for="symbolTri">三角形</label>
</div>
<div class="col-sm-6">
<input type="radio" name="symbol" id="symbolTriE" value="triangle" @change="updateSymbol('emptyTriangle')" />
<label for="symbolTriE">空心三角形</label>
</div>
<div class="col-sm-6">
<input type="radio" name="symbol" id="symbolDiamond" value="diamond" @change="updateSymbol('diamond')" />
<label for="symbolDiamond">菱形</label>
</div>
<div class="col-sm-6">
<input type="radio" name="symbol" id="symbolDiamondE" value="diamond" @change="updateSymbol('emptyDiamond')" />
<label for="symbolDiamondE">空心菱形</label>
</div>
<div class="col-sm-6">
<input type="radio" name="symbol" id="symbolPin" value="pin" @change="updateSymbol('pin')" />
<label for="symbolPin">水滴</label>
</div>
<div class="col-sm-6">
<input type="radio" name="symbol" id="symbolPinE" value="pin" @change="updateSymbol('emptyPin')" />
<label for="symbolPinE">空心水滴</label>
</div>
<div class="col-sm-6">
<input type="radio" name="symbol" id="symbolArrow" value="arrow" @change="updateSymbol('arrow')" />
<label for="symbolArrow">箭头</label>
</div>
<div class="col-sm-6">
<input type="radio" name="symbol" id="symbolArrowE" value="arrow" @change="updateSymbol('emptyArrow')" />
<label for="symbolArrowE">空心箭头</label>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div><!-- end of acc-line -->
<div id="acc-k" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#acc-k" href="#acc-k-body" title="k">K 线图</a>
</h4>
</div>
<div id="acc-k-body" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-horizontal">
<config-color title="阳线填充" :color.sync="theme.kColor"></config-color>
<config-color title="阴线填充" :color.sync="theme.kColor0"></config-color>
<config-color title="阳线描边" :color.sync="theme.kBorderColor"></config-color>
<config-color title="阴线描边" :color.sync="theme.kBorderColor0"></config-color>
<config-number title="描边宽度" :value.sync="theme.kBorderWidth"></config-number>
</form>
</div>
</div>
</div>
</div><!-- end of acc-k -->
<div id="acc-graph" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#acc-graph" href="#acc-graph-body" title="graph">力导图</a>
</h4>
</div>
<div id="acc-graph-body" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-horizontal">
<config-color title="连线" :color.sync="theme.graphLineColor"></config-color>
<config-number title="连线宽度" :value.sync="theme.graphLineWidth"></config-number>
</form>
</div>
</div>
</div>
</div><!-- end of acc-graph -->
<div id="acc-about" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#acc-about" href="#acc-about-body" title="graph">关于</a>
</h4>
</div>
<div id="acc-about-body" class="panel-collapse collapse">
<div class="panel-body">
项目源码:<a href="https://github.com/Ovilia/ECharts-Theme-Builder" target="_blank">GitHub</a>
</div>
</div>
</div>
</div><!-- end of acc-about -->
</div><!-- end of left -->
<div class="col-md-9 col-sm-8 chart-container scroll-content"
v-bind:style="{ backgroundColor: chartDisplay.background, backgroundImage: themeName == 'halloween' ? 'url(img/pumpkin.png)' : 'none'}">
<h3 v-bind:style="{ color: chartDisplay.title }">示例预览</h3>
<div class="row">
<div v-for="i in [1,2,3,4,5,6,7,8,9,10,11,12]" class="ec-container col-md-6">
<div class="ec-panel"></div>
</div>
</div>
</div><!-- end of chart panel -->
</div>
<div class="modal fade" id="download-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">帮助</h4>
</div>
<div class="modal-body">
<h4>主题在线构建工具是什么?</h4>
<p>“主题”是 ECharts 图表的风格抽象,用于统一多个图表的风格样式。使用主题在线构建工具,可以快速直观地生成主题配置文件,并在 ECharts 中使用自定义的主题样式。</p>
<p>在此主题的基础上,你仍然可以使用 <code>setOption</code> 覆盖或设置主题样式。</p>
<p>ECharts 官方提供 <code>default</code><code>infographic</code><code>shine</code><code>roma</code><code>macarons</code><code>vintage</code> 等主题,可供<a href="http://echarts.baidu.com/download-theme.html" target="_blank">下载</a>使用。</p>
<h4>导入、导出</h4>
<p>为了便于二次修改,我们的主题构建工具支持导入、导出配置项,导出的 JSON 文件仅用于在本工具中导入使用,而不能直接作为主题在 ECharts 中注册。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div><!-- end of modal -->
<div class="modal fade" id="download-js-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">主题下载</h4>
</div>
<div class="modal-body">
<!-- tab nav -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#modal-js" role="tab" data-toggle="tab">
JS 版本
</a>
</li>
<li role="presentation">
<a href="#modal-json" role="tab" data-toggle="tab">
JSON 版本
</a>
</li>
</ul>
<!-- tab content -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="modal-js">
<ol id="how-to-use-js">
<li><span v-if="downloadable">下载或</span>复制以下的主题保存至 <code>*.js</code> 文件;</li>
<li>将该文件在 HTML 中引用;</li>
<li>使用 <code>echarts.init(dom, '{{ themeName || 'customed' }}')</code> 创建图表,第二个参数即为 <code>*.js</code> 文件中注册的主题名字。</li>
</ol>
<div class="code-btn">
<div class="btn-group" role="group">
<a v-if="downloadable" class="btn btn-sm btn-primary" @click="downloadThemeJs()">下载</a>
<a class="btn btn-sm btn-default" @click="copyThemeJs()">复制</a>
</div>
<label id="copy-js-success">已复制到剪贴板,请保存至 <code>*.js</code> 文件</label>
<label id="copy-js-fail">请使用<kbd>{{ copyKbd }}</kbd> + <kbd>s</kbd>复制,并保存至 <code>*.js</code> 文件</label>
</div>
<pre>
<code class="javascript" id="js-code"></code>
</pre>
</div>
<div role="tabpanel" class="tab-pane" id="modal-json">
<ol id="how-to-use-json">
<li><span v-if="downloadable">下载或</span>复制以下的主题保存至 <code>*.json</code> 文件;</li>
<li>读取该 JSON 文件,并使用 <code>obj = JSON.parse(data)</code> 将其转换成对象;</li>
<li>调用 <code>echarts.registerTheme('{{ themeName || 'customed' }}', obj)</code> 注册主题;</li>
<li>使用 <code>echarts.init(dom, '{{ themeName || 'customed' }}')</code> 创建图表,第二个参数即为刚才注册的主题名字。</li>
</ol>
<div class="code-btn">
<div class="btn-group" role="group">
<a v-if="downloadable" class="btn btn-sm btn-primary" @click="downloadThemeJson()">下载</a>
<a class="btn btn-sm btn-default" @click="copyThemeJson()">复制</a>
</div>
<label id="copy-json-success">已复制到剪贴板,请保存至 <code>*.json</code> 文件</label>
<label id="copy-json-fail">请使用<kbd>{{ copyKbd }}</kbd> + <kbd>s</kbd>复制,并保存至 <code>*.json</code> 文件</label>
</div>
<pre>
<code class="json" id="json-code"></code>
</pre>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div><!-- end of modal -->
</div>
</div>
<script src="//cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/bootstrap-colorpicker@2.5.3/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue@1.0.28/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>
<script src="./theme-builder/app.min.js"></script>
</div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script><!-- Google Analytics--><script type="text/javascript" async src="https://www.googletagmanager.com/gtag/js?id=UA-141228404-1"></script><script type="text/javascript">window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-141228404-1');</script></html>