app/en/body.html [1:520]:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<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">Basic</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>
                      Download
                    </button>
                    <button type="button" class="btn btn-default" @click="importJson()">
                      <span class="glyphicon glyphicon-import"></span>
                      Import
                    </button>
                    <button type="button" class="btn btn-default" @click="exportJson()">
                      <span class="glyphicon glyphicon-export"></span>
                      Export
                    </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>
                      Refresh
                    </button>
                    <button type="button" class="btn btn-default" @click="newTheme()">
                      <span class="glyphicon glyphicon-repeat"></span>
                      Reset
                    </button>
                    <button class="btn btn-default" data-toggle="modal" data-target="#download-modal">
                      <span class="glyphicon glyphicon-question-sign"></span>
                      Help
                    </button>
                  </div>
                </div>
                <form class="form form-horizontal">
                  <div class="form-group">
                    <label class="col-sm-3 control-label">Name</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">Series</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>Default Themes</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">Basic Config</a>
              </h4>
            </div>
            <div id="acc-theme-body" class="panel-collapse collapse">
              <div class="panel-body">
                <form class="form-horizontal">
                  <config-color title="Background" :color.sync="theme.backgroundColor"></config-color>
                  <config-color title="Title" :color.sync="theme.titleColor"></config-color>
                  <config-color title="Subtitle" :color.sync="theme.subtitleColor"></config-color>
                  <config-color-list title="Theme" :colors.sync="theme.color"></config-color-list>
                  <config-color title="Label Text" :color.sync="theme.markTextColor"></config-color>
                  <config-number title="Border Width" :value.sync="theme.borderWidth"></config-number>
                  <config-color title="Border Color" :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">Visual Mapping</a>
              </h4>
            </div>
            <div id="acc-visualmap-body" class="panel-collapse collapse">
              <div class="panel-body">
                <form class="form-horizontal">
                  <config-color-list title="Visual Mapping" :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">Axis</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">Change Config For Each Axis Type</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.type }}</h5>
                    <config-color can-disable :enabled.sync="axis.axisLineShow" title="Line" :color.sync="axis.axisLineColor"></config-color>
                    <config-color can-disable :enabled.sync="axis.axisTickShow" title="Tick" :color.sync="axis.axisTickColor"></config-color>
                    <config-color-list can-disable :enabled.sync="axis.splitLineShow" title="Grid" :colors.sync="axis.splitLineColor"></config-color-list>
                    <config-color-list can-disable :enabled.sync="axis.splitAreaShow" title="Area" :colors.sync="axis.splitAreaColor"></config-color-list>
                    <config-color can-disable :enabled.sync="axis.axisLabelShow" title="Label" :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">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="Text"></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">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="Item"></config-color>
                  <config-color :color.sync="theme.toolboxEmphasisColor" title="Emphasis"></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">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="Axis Color"></config-color>
                  <config-number :value.sync="theme.tooltipAxisWidth" title="Axis Line Width"></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">Timeline</a>
              </h4>
            </div>
            <div id="acc-timeline-body" class="panel-collapse collapse">
              <div class="panel-body">
                <form class="form-horizontal">
                  <config-color title="Item" :color.sync="theme.timelineItemColor"></config-color>
                  <config-color title="Emphasis" :color.sync="theme.timelineItemColorE"></config-color>
                  <config-color title="Check" :color.sync="theme.timelineCheckColor"></config-color>
                  <config-color title="Check Border Color" :color.sync="theme.timelineCheckBorderColor"></config-color>
                  <config-number title="Check Border Width" :value.sync="theme.timelineItemBorderWidth"></config-number>
                  <config-color title="Axis" :color.sync="theme.timelineLineColor"></config-color>
                  <config-number title="AxisWidth" :value.sync="theme.timelineLineWidth"></config-number>
                  <config-color title="Control Color" :color.sync="theme.timelineControlColor"></config-color>
                  <config-color title="Control Border Color" :color.sync="theme.timelineControlBorderColor"></config-color>
                  <config-number title="Control Border Width" :value.sync="theme.timelineControlBorderWidth"></config-number>
                  <config-color title="Text Color" :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">Zoom</a>
              </h4>
            </div>
            <div id="acc-datazoom-body" class="panel-collapse collapse">
              <div class="panel-body">
                <form class="form-horizontal">
                  <config-color title="Background" :color.sync="theme.datazoomBackgroundColor"></config-color>
                  <config-color title="Data" :color.sync="theme.datazoomDataColor"></config-color>
                  <config-color title="Filling" :color.sync="theme.datazoomFillColor"></config-color>
                  <config-color title="Handle" :color.sync="theme.datazoomHandleColor"></config-color>
                  <config-number title="Handle Size" :value.sync="theme.datazoomHandleWidth"></config-number>
                  <config-color title="Text" :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">Line Chart</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">Smooth Line</label>
                    </div>
                  </div>
                  <config-number title="Line Width" :value.sync="theme.lineWidth"></config-number>
                  <config-number title="Border Width" :value.sync="theme.symbolBorderWidth"></config-number>
                  <config-number title="Item Size" :value.sync="theme.symbolSize"></config-number>
                  <div class="form-group">
                    <div class="col-sm-12" style="margin-bottom: 10px;">
                      <label class="control-label">Shape</label>
                    </div>
                    <div class="col-sm-12">
                      <div class="row space-row">
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolCircle" value="circle" @change="updateSymbol('circle')" />
                          <label for="symbolCircle">Circle</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolCircleE" value="circle" checked @change="updateSymbol('emptyCircle')" />
                          <label for="symbolCircleE">Empty Circle</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolRect" value="rect" @change="updateSymbol('rect')" />
                          <label for="symbolRect">Square</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolRectE" value="rect" @change="updateSymbol('emptyRect')" />
                          <label for="symbolRectE">Empty Square</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolRoundRect" value="roundRect" @change="updateSymbol('roundRect')" />
                          <label for="symbolRoundRect">Rounded Rectangle</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolRoundRectE" value="roundRect" @change="updateSymbol('emptyRoundRect')" />
                          <label for="symbolRoundRectE">Empty Rounded Rectangle</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolTri" value="triangle" @change="updateSymbol('triangle')" />
                          <label for="symbolTri">Triangle</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolTriE" value="triangle" @change="updateSymbol('emptyTriangle')" />
                          <label for="symbolTriE">Empty Triangle</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolDiamond" value="diamond" @change="updateSymbol('diamond')" />
                          <label for="symbolDiamond">Diamond</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolDiamondE" value="diamond" @change="updateSymbol('emptyDiamond')" />
                          <label for="symbolDiamondE">Empty Diamond</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolPin" value="pin" @change="updateSymbol('pin')" />
                          <label for="symbolPin">Pin</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolPinE" value="pin" @change="updateSymbol('emptyPin')" />
                          <label for="symbolPinE">Empty Pin</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolArrow" value="arrow" @change="updateSymbol('arrow')" />
                          <label for="symbolArrow">Arrow</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolArrowE" value="arrow" @change="updateSymbol('emptyArrow')" />
                          <label for="symbolArrowE">Empty Arrow</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">Candlestick Chart</a>
              </h4>
            </div>
            <div id="acc-k-body" class="panel-collapse collapse">
              <div class="panel-body">
                <form class="form-horizontal">
                  <config-color title="Bullish Color" :color.sync="theme.kColor"></config-color>
                  <config-color title="Bearish Color" :color.sync="theme.kColor0"></config-color>
                  <config-color title="Bullish Border Color" :color.sync="theme.kBorderColor"></config-color>
                  <config-color title="Bullish Border Color" :color.sync="theme.kBorderColor0"></config-color>
                  <config-number title="Border Width" :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">Force-directed Chart</a>
              </h4>
            </div>
            <div id="acc-graph-body" class="panel-collapse collapse">
              <div class="panel-body">
                <form class="form-horizontal">
                  <config-color title="Line Color" :color.sync="theme.graphLineColor"></config-color>
                  <config-number title="Line Width" :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">About</a>
              </h4>
            </div>
            <div id="acc-about-body" class="panel-collapse collapse">
              <div class="panel-body">
                Source code: <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 }">Example</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">Help</h4>
          </div>
          <div class="modal-body">
            <h4>What is the ECharts Theme Online Build Tool?</h4>
            <p>"Theme" is an abstract style of ECharts charts, used to unify the styles of multiple charts. Using Online Build Tool, you can intuitively generate the theme Config file and use customized theme styles in ECharts.</p>
            <p>You can still use <code>setOption</code> to override or set the theme style.</p>
            <p>ECharts officially provides theme: <code>default</code>、<code>infographic</code>、<code>shine</code>、<code>roma</code>、<code>macarons</code>、<code>vintage</code>, etc.. Available for download <a href="http://echarts.baidu.com/download-theme.html" target="_blank">here</a>.</p>

            <h4>Import & Export</h4>
            <p>In order to facilitate secondary modification, our theme building tool supports importing and exporting Config items. The exported JSON file can be used only in this tool, but not in ECharts directly. </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">cancel</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">Theme Download</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 version
                </a>
              </li>
              <li role="presentation">
                <a href="#modal-json" role="tab" data-toggle="tab">
                  JSON version
                </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">Download or </span>copy the following theme and save as a <code>*.js</code> file; </li>
                  <li>Quote this file in HTML</li>
                  <li>Use <code>echarts.init(dom, '{{ themeName || 'customed' }}')</code> to create the chart. The second parameter is the theme name registered in <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()">Download</a>
                    <a class="btn btn-sm btn-default" @click="copyThemeJs()">Copy</a>
                  </div>
                  <label id="copy-js-success">Successfully copied to clipboard, please save as <code>*.js</code>. </label>
                  <label id="copy-js-fail">Please use <kbd>{{ copyKbd }}</kbd> + <kbd>s</kbd> to copy, and save as <code>*.js</code> file. </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">Download or </span>copy and save the following theme as <code>*.json</code>; </li>
                  <li>Read this JSON file and use <code>obj = JSON.parse(data)</code> to transfer it as object; </li>
                  <li>Call <code>echarts.registerTheme('{{ themeName || 'customed' }}', obj)</code> to register the theme. </li>
                  <li>Use <code>echarts.init(dom, '{{ themeName || 'customed' }}')</code> to create the chart. The second parameter represents the theme name. </li>
                </ol>
                <div class="code-btn">
                  <div class="btn-group" role="group">
                    <a v-if="downloadable" class="btn btn-sm btn-primary" @click="downloadThemeJson()">Download</a>
                    <a class="btn btn-sm btn-default" @click="copyThemeJson()">Copy</a>
                  </div>
                  <label id="copy-json-success">Successfully copied to clipboard, please save as <code>*.json</code> file. </label>
                  <label id="copy-json-fail">Please use <kbd>{{ copyKbd }}</kbd> + <kbd>s</kbd> to copy, and save as <code>*.json</code> file. </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">cancel</button>
          </div>
        </div>
      </div>
    </div><!-- end of modal -->
  </div>

</div>

<script src="//cdn.jsdelivr.net/npm/echarts@5/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>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -



app/en/index.html [16:535]:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<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">Basic</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>
                      Download
                    </button>
                    <button type="button" class="btn btn-default" @click="importJson()">
                      <span class="glyphicon glyphicon-import"></span>
                      Import
                    </button>
                    <button type="button" class="btn btn-default" @click="exportJson()">
                      <span class="glyphicon glyphicon-export"></span>
                      Export
                    </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>
                      Refresh
                    </button>
                    <button type="button" class="btn btn-default" @click="newTheme()">
                      <span class="glyphicon glyphicon-repeat"></span>
                      Reset
                    </button>
                    <button class="btn btn-default" data-toggle="modal" data-target="#download-modal">
                      <span class="glyphicon glyphicon-question-sign"></span>
                      Help
                    </button>
                  </div>
                </div>
                <form class="form form-horizontal">
                  <div class="form-group">
                    <label class="col-sm-3 control-label">Name</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">Series</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>Default Themes</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">Basic Config</a>
              </h4>
            </div>
            <div id="acc-theme-body" class="panel-collapse collapse">
              <div class="panel-body">
                <form class="form-horizontal">
                  <config-color title="Background" :color.sync="theme.backgroundColor"></config-color>
                  <config-color title="Title" :color.sync="theme.titleColor"></config-color>
                  <config-color title="Subtitle" :color.sync="theme.subtitleColor"></config-color>
                  <config-color-list title="Theme" :colors.sync="theme.color"></config-color-list>
                  <config-color title="Label Text" :color.sync="theme.markTextColor"></config-color>
                  <config-number title="Border Width" :value.sync="theme.borderWidth"></config-number>
                  <config-color title="Border Color" :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">Visual Mapping</a>
              </h4>
            </div>
            <div id="acc-visualmap-body" class="panel-collapse collapse">
              <div class="panel-body">
                <form class="form-horizontal">
                  <config-color-list title="Visual Mapping" :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">Axis</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">Change Config For Each Axis Type</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.type }}</h5>
                    <config-color can-disable :enabled.sync="axis.axisLineShow" title="Line" :color.sync="axis.axisLineColor"></config-color>
                    <config-color can-disable :enabled.sync="axis.axisTickShow" title="Tick" :color.sync="axis.axisTickColor"></config-color>
                    <config-color-list can-disable :enabled.sync="axis.splitLineShow" title="Grid" :colors.sync="axis.splitLineColor"></config-color-list>
                    <config-color-list can-disable :enabled.sync="axis.splitAreaShow" title="Area" :colors.sync="axis.splitAreaColor"></config-color-list>
                    <config-color can-disable :enabled.sync="axis.axisLabelShow" title="Label" :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">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="Text"></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">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="Item"></config-color>
                  <config-color :color.sync="theme.toolboxEmphasisColor" title="Emphasis"></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">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="Axis Color"></config-color>
                  <config-number :value.sync="theme.tooltipAxisWidth" title="Axis Line Width"></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">Timeline</a>
              </h4>
            </div>
            <div id="acc-timeline-body" class="panel-collapse collapse">
              <div class="panel-body">
                <form class="form-horizontal">
                  <config-color title="Item" :color.sync="theme.timelineItemColor"></config-color>
                  <config-color title="Emphasis" :color.sync="theme.timelineItemColorE"></config-color>
                  <config-color title="Check" :color.sync="theme.timelineCheckColor"></config-color>
                  <config-color title="Check Border Color" :color.sync="theme.timelineCheckBorderColor"></config-color>
                  <config-number title="Check Border Width" :value.sync="theme.timelineItemBorderWidth"></config-number>
                  <config-color title="Axis" :color.sync="theme.timelineLineColor"></config-color>
                  <config-number title="AxisWidth" :value.sync="theme.timelineLineWidth"></config-number>
                  <config-color title="Control Color" :color.sync="theme.timelineControlColor"></config-color>
                  <config-color title="Control Border Color" :color.sync="theme.timelineControlBorderColor"></config-color>
                  <config-number title="Control Border Width" :value.sync="theme.timelineControlBorderWidth"></config-number>
                  <config-color title="Text Color" :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">Zoom</a>
              </h4>
            </div>
            <div id="acc-datazoom-body" class="panel-collapse collapse">
              <div class="panel-body">
                <form class="form-horizontal">
                  <config-color title="Background" :color.sync="theme.datazoomBackgroundColor"></config-color>
                  <config-color title="Data" :color.sync="theme.datazoomDataColor"></config-color>
                  <config-color title="Filling" :color.sync="theme.datazoomFillColor"></config-color>
                  <config-color title="Handle" :color.sync="theme.datazoomHandleColor"></config-color>
                  <config-number title="Handle Size" :value.sync="theme.datazoomHandleWidth"></config-number>
                  <config-color title="Text" :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">Line Chart</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">Smooth Line</label>
                    </div>
                  </div>
                  <config-number title="Line Width" :value.sync="theme.lineWidth"></config-number>
                  <config-number title="Border Width" :value.sync="theme.symbolBorderWidth"></config-number>
                  <config-number title="Item Size" :value.sync="theme.symbolSize"></config-number>
                  <div class="form-group">
                    <div class="col-sm-12" style="margin-bottom: 10px;">
                      <label class="control-label">Shape</label>
                    </div>
                    <div class="col-sm-12">
                      <div class="row space-row">
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolCircle" value="circle" @change="updateSymbol('circle')" />
                          <label for="symbolCircle">Circle</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolCircleE" value="circle" checked @change="updateSymbol('emptyCircle')" />
                          <label for="symbolCircleE">Empty Circle</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolRect" value="rect" @change="updateSymbol('rect')" />
                          <label for="symbolRect">Square</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolRectE" value="rect" @change="updateSymbol('emptyRect')" />
                          <label for="symbolRectE">Empty Square</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolRoundRect" value="roundRect" @change="updateSymbol('roundRect')" />
                          <label for="symbolRoundRect">Rounded Rectangle</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolRoundRectE" value="roundRect" @change="updateSymbol('emptyRoundRect')" />
                          <label for="symbolRoundRectE">Empty Rounded Rectangle</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolTri" value="triangle" @change="updateSymbol('triangle')" />
                          <label for="symbolTri">Triangle</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolTriE" value="triangle" @change="updateSymbol('emptyTriangle')" />
                          <label for="symbolTriE">Empty Triangle</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolDiamond" value="diamond" @change="updateSymbol('diamond')" />
                          <label for="symbolDiamond">Diamond</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolDiamondE" value="diamond" @change="updateSymbol('emptyDiamond')" />
                          <label for="symbolDiamondE">Empty Diamond</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolPin" value="pin" @change="updateSymbol('pin')" />
                          <label for="symbolPin">Pin</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolPinE" value="pin" @change="updateSymbol('emptyPin')" />
                          <label for="symbolPinE">Empty Pin</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolArrow" value="arrow" @change="updateSymbol('arrow')" />
                          <label for="symbolArrow">Arrow</label>
                        </div>
                        <div class="col-sm-12">
                          <input type="radio" name="symbol" id="symbolArrowE" value="arrow" @change="updateSymbol('emptyArrow')" />
                          <label for="symbolArrowE">Empty Arrow</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">Candlestick Chart</a>
              </h4>
            </div>
            <div id="acc-k-body" class="panel-collapse collapse">
              <div class="panel-body">
                <form class="form-horizontal">
                  <config-color title="Bullish Color" :color.sync="theme.kColor"></config-color>
                  <config-color title="Bearish Color" :color.sync="theme.kColor0"></config-color>
                  <config-color title="Bullish Border Color" :color.sync="theme.kBorderColor"></config-color>
                  <config-color title="Bullish Border Color" :color.sync="theme.kBorderColor0"></config-color>
                  <config-number title="Border Width" :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">Force-directed Chart</a>
              </h4>
            </div>
            <div id="acc-graph-body" class="panel-collapse collapse">
              <div class="panel-body">
                <form class="form-horizontal">
                  <config-color title="Line Color" :color.sync="theme.graphLineColor"></config-color>
                  <config-number title="Line Width" :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">About</a>
              </h4>
            </div>
            <div id="acc-about-body" class="panel-collapse collapse">
              <div class="panel-body">
                Source code: <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 }">Example</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">Help</h4>
          </div>
          <div class="modal-body">
            <h4>What is the ECharts Theme Online Build Tool?</h4>
            <p>"Theme" is an abstract style of ECharts charts, used to unify the styles of multiple charts. Using Online Build Tool, you can intuitively generate the theme Config file and use customized theme styles in ECharts.</p>
            <p>You can still use <code>setOption</code> to override or set the theme style.</p>
            <p>ECharts officially provides theme: <code>default</code>、<code>infographic</code>、<code>shine</code>、<code>roma</code>、<code>macarons</code>、<code>vintage</code>, etc.. Available for download <a href="http://echarts.baidu.com/download-theme.html" target="_blank">here</a>.</p>

            <h4>Import & Export</h4>
            <p>In order to facilitate secondary modification, our theme building tool supports importing and exporting Config items. The exported JSON file can be used only in this tool, but not in ECharts directly. </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">cancel</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">Theme Download</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 version
                </a>
              </li>
              <li role="presentation">
                <a href="#modal-json" role="tab" data-toggle="tab">
                  JSON version
                </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">Download or </span>copy the following theme and save as a <code>*.js</code> file; </li>
                  <li>Quote this file in HTML</li>
                  <li>Use <code>echarts.init(dom, '{{ themeName || 'customed' }}')</code> to create the chart. The second parameter is the theme name registered in <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()">Download</a>
                    <a class="btn btn-sm btn-default" @click="copyThemeJs()">Copy</a>
                  </div>
                  <label id="copy-js-success">Successfully copied to clipboard, please save as <code>*.js</code>. </label>
                  <label id="copy-js-fail">Please use <kbd>{{ copyKbd }}</kbd> + <kbd>s</kbd> to copy, and save as <code>*.js</code> file. </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">Download or </span>copy and save the following theme as <code>*.json</code>; </li>
                  <li>Read this JSON file and use <code>obj = JSON.parse(data)</code> to transfer it as object; </li>
                  <li>Call <code>echarts.registerTheme('{{ themeName || 'customed' }}', obj)</code> to register the theme. </li>
                  <li>Use <code>echarts.init(dom, '{{ themeName || 'customed' }}')</code> to create the chart. The second parameter represents the theme name. </li>
                </ol>
                <div class="code-btn">
                  <div class="btn-group" role="group">
                    <a v-if="downloadable" class="btn btn-sm btn-primary" @click="downloadThemeJson()">Download</a>
                    <a class="btn btn-sm btn-default" @click="copyThemeJson()">Copy</a>
                  </div>
                  <label id="copy-json-success">Successfully copied to clipboard, please save as <code>*.json</code> file. </label>
                  <label id="copy-json-fail">Please use <kbd>{{ copyKbd }}</kbd> + <kbd>s</kbd> to copy, and save as <code>*.json</code> file. </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">cancel</button>
          </div>
        </div>
      </div>
    </div><!-- end of modal -->
  </div>

</div>

<script src="//cdn.jsdelivr.net/npm/echarts@5/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>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -