| <!DOCTYPE html><html lang="en-US"><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://echarts.apache.org/en/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://echarts.apache.org/en/css/main.css?_v_=1598523895644"><script>window.EC_WWW_LANG = 'en'; |
| </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>Theme Builder - Apache ECharts (incubating)</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://echarts.apache.org/en/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 is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/incubator-echarts" target="_blank">Source Code (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/incubator-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">Others<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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">Licenses<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">Sponsorship<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">Thanks<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></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('zh')">中文</a></li><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/apache-incubator-white.png" width="18"></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">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">×</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">×</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@4/dist/echarts-en.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://echarts.apache.org/en/js/common.js?_v_=1598523895644"></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> |
