app/zh/body.html

<link rel="stylesheet" href="https://echarts.apache.org/zh/js/vendors/bootstrap-colorpicker@2.5.3/css/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="https://echarts.apache.org/zh/js/vendors/highlightjs/cdn-release@11.8.0/build/styles/default.min.css">
<link rel="stylesheet" href="https://echarts.apache.org/zh/js/vendors/highlightjs/cdn-release@11.8.0/build/styles/github.min.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, $index) in preDefinedThemes">
                      <a class="theme-plan-group" @click="selectPreDefinedTheme($index)" v-bind:style="{ backgroundColor: group.background }" v-bind: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, $index) 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 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 || 'customized' }}')</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 || 'customized' }}', obj)</code> 注册主题；</li>
                  <li>使用 <code>echarts.init(dom, '{{ themeName || 'customized' }}')</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="https://echarts.apache.org/zh/js/vendors/echarts/dist/echarts.min.js"></script>
<script src="https://echarts.apache.org/zh/js/vendors/lodash@3.10.1/lodash.min.js"></script>
<script src="https://echarts.apache.org/zh/js/vendors/bootstrap-colorpicker@2.5.3/js/bootstrap-colorpicker.min.js"></script>
<script src="https://echarts.apache.org/zh/js/vendors/vue@2.6.14/vue.min.js"></script>
<script src="https://echarts.apache.org/zh/js/vendors/highlightjs/cdn-release@11.8.0/build/highlight.min.js"></script>
<script src="https://echarts.apache.org/zh/js/vendors/file-saver@2.0.5/FileSaver.min.js"></script>

<script src="./theme-builder/app.min.js"></script>