Merge branch 'release'

src/component/axis/AxisBuilder.js

@@ -25,6 +25,7 @@ import {isRadianAroundZero, remRadian} from '../../util/number';
 import {createSymbol} from '../../util/symbol';
 import * as matrixUtil from 'zrender/src/core/matrix';
 import {applyTransform as v2ApplyTransform} from 'zrender/src/core/vector';
+import {shouldShowAllLabels} from '../../coord/axisHelper';
 
 
 var PI = Math.PI;
@@ -479,6 +480,10 @@ function isSilent(axisModel) {
 }
 
 function fixMinMaxLabelShow(axisModel, labelEls, tickEls) {
+    if (shouldShowAllLabels(axisModel.axis)) {
+        return;
+    }
+
     // If min or max are user set, we need to check
     // If the tick on min(max) are overlap on their neighbour tick
     // If they are overlapped, we need to hide the min(max) tick label

src/coord/axisHelper.js

@@ -387,4 +387,23 @@ function rotateTextRect(textRect, rotate) {
     return rotatedRect;
 }
 
+/**
+ * @param {module:echarts/src/model/Model} model axisLabelModel or axisTickModel
+ * @return {number|String} Can be null|'auto'|number|function
+ */
+export function getOptionCategoryInterval(model) {
+    var interval = model.get('interval');
+    return interval == null ? 'auto' : interval;
+}
+
+/**
+ * Set `categoryInterval` as 0 implicitly indicates that
+ * show all labels reguardless of overlap.
+ * @param {Object} axis axisModel.axis
+ * @return {boolean}
+ */
+export function shouldShowAllLabels(axis) {
+    return axis.type === 'category'
+        && getOptionCategoryInterval(axis.getLabelModel()) === 0;
+}
 

src/coord/axisTickLabelBuilder.js

@@ -20,7 +20,11 @@
 import * as zrUtil from 'zrender/src/core/util';
 import * as textContain from 'zrender/src/contain/text';
 import {makeInner} from '../util/model';
-import {makeLabelFormatter} from './axisHelper';
+import {
+    makeLabelFormatter,
+    getOptionCategoryInterval,
+    shouldShowAllLabels
+} from './axisHelper';
 
 var inner = makeInner();
 
@@ -304,12 +308,11 @@ function makeLabelsByNumericCategoryInterval(axis, categoryInterval, onlyTick) {
     // suitable for splitLine and splitArea rendering.
     // (2) Scales except category always contain min max label so
     // do not need to perform this process.
-    var showMinMax = {
-        min: labelModel.get('showMinLabel'),
-        max: labelModel.get('showMaxLabel')
-    };
+    var showAllLabel = shouldShowAllLabels(axis);
+    var includeMinLabel = labelModel.get('showMinLabel') || showAllLabel;
+    var includeMaxLabel = labelModel.get('showMaxLabel') || showAllLabel;
 
-    if (showMinMax.min && startTick !== ordinalExtent[0]) {
+    if (includeMinLabel && startTick !== ordinalExtent[0]) {
         addItem(ordinalExtent[0]);
     }
 
@@ -319,7 +322,7 @@ function makeLabelsByNumericCategoryInterval(axis, categoryInterval, onlyTick) {
         addItem(tickValue);
     }
 
-    if (showMinMax.max && tickValue !== ordinalExtent[1]) {
+    if (includeMaxLabel && tickValue !== ordinalExtent[1]) {
         addItem(ordinalExtent[1]);
     }
 
@@ -360,9 +363,3 @@ function makeLabelsByCustomizedCategoryInterval(axis, categoryInterval, onlyTick
 
     return result;
 }
-
-// Can be null|'auto'|number|function
-function getOptionCategoryInterval(model) {
-    var interval = model.get('interval');
-    return interval == null ? 'auto' : interval;
-}

test/axis-lastLabel.html

@@ -47,6 +47,7 @@ under the License.
         <div class="chart" id="chart0"></div>
         <div class="chart" id="chart1"></div>
         <div class="chart" id="chart2"></div>
+        <div class="chart" id="chart3"></div>
 
 
 
@@ -357,5 +358,107 @@ under the License.
 
 
 
+
+
+
+
+
+
+
+        <script>
+
+            require([
+                'data/rainfall.json',
+                'echarts'
+            ], function (rainfallData, echarts) {
+
+                var chart = echarts.init(document.getElementById('chart1'), null, {
+
+                });
+
+                var option = {
+                    tooltip : {
+                        trigger: 'axis',
+                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
+                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                        }
+                    },
+                    legend: {
+                        data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
+                    },
+                    grid: [{
+                        height: 80,
+                        width: '40%',
+                        containLabel: true
+                    }, {
+                        height: 80,
+                        right: 10,
+                        width: '40%',
+                        containLabel: true
+                    }],
+                    xAxis: [{
+                        type: 'value'
+                    }, {
+                        type: 'value',
+                        gridIndex: 1
+                    }],
+                    yAxis: [{
+                        axisLabel: {
+                            interval: 0,
+                            textStyle: {
+                                fontSize: 18
+                            }
+                        },
+                        type: 'category',
+                        data: ['周 A','周 B','周 C','周 D','周 E','周 F','周 G']
+                    }, {
+                        gridIndex: 1,
+                        axisLabel: {
+                            interval: 0,
+                            textStyle: {
+                                fontSize: 18
+                            },
+                            showMinLabel: false,
+                            showMaxLabel: false
+                        },
+                        type: 'category',
+                        data: ['周 A','周 B','周 C','周 D','周 E','周 F','周 G']
+                    }],
+                    series: [{
+                        type: 'bar',
+                        data: [320, 302, 301, 334, 390, 330, 320]
+                    }, {
+                        type: 'bar',
+                        data: [325, 102, 201, 84, 190, 230, 120],
+                        xAxisIndex: 1,
+                        yAxisIndex: 1
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'chart3', {
+                    title: [
+                        'category yAxis: all Label should be displayed.',
+                        'axisLabel.interval is 0, showMaxLabel/showMinLabel should be ignored.'
+                    ],
+                    option: option,
+                    info: {
+                        yAxis0: {
+                            axisLabel: option.xAxis[0].axisLabel,
+                            axisTick: option.xAxis[0].axisTick
+                        },
+                        yAxis1: {
+                            axisLabel: option.xAxis[1].axisLabel,
+                            axisTick: option.xAxis[1].axisTick
+                        }
+                    },
+                    infoKey: 'xAxis'
+                });
+            })
+
+        </script>
+
+
+
+
     </body>
 </html>
\ No newline at end of file

test/axisLabel.html

@@ -26,6 +26,8 @@ under the License.
         <script src="lib/config.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <script src="ut/lib/canteen.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="stylesheet" href="lib/reset.css">
     </head>
@@ -41,6 +43,7 @@ under the License.
         <div class="chart" id="main1"></div>
         <div class="chart" id="main2"></div>
         <div class="chart" id="main3"></div>
+        <div class="chart" id="main4"></div>
 
 
 
@@ -257,7 +260,11 @@ under the License.
             require([
                 'echarts'
             ], function (echarts) {
-                var chart = echarts.init(document.getElementById('main3'));
+                var el = document.getElementById('main3');
+                if (!el) {
+                    return;
+                }
+                var chart = echarts.init(el);
                 var rotate = 30;
 
                 option = {
@@ -302,5 +309,75 @@ under the License.
 
         </script>
 
+
+
+
+
+
+
+
+        <script>
+
+            var chart;
+            var myChart;
+            var option;
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                var option = {
+                    backgroundColor: '#eee',
+                    "xAxis": {
+                        "type": "category",
+                        "data": [
+                            "2018-10-08",
+                            "2018-10-09"
+                        ]
+                    },
+                    "yAxis": {
+                        "type": "value",
+                        "axisLabel": {
+                            "color": "red",
+                            formatter: function (value, index) {
+                                if (index === 0){
+                                    // Used to make yAxis label not show (a bug).
+                                    return '';
+                                } else {
+                                    return value + '';
+                                }
+                            }
+                        },
+                        splitLine: {
+                            show: false
+                        },
+                        "z": 3
+                    },
+                    animation: false,
+                    "tooltip": {
+                        "trigger": "axis"
+                    },
+                    "series": [
+                        {
+                            "type": "line",
+                            "data": [
+                                1231212,
+                                32341323
+                            ]
+                        }
+                    ]
+                }
+
+                testHelper.create(echarts, 'main4', {
+                    title: 'Label of yAxis should be RED, but 0 label does not display',
+                    option: option,
+                    recordCanvas: true
+                });
+            });
+
+        </script>
+
+
+
     </body>
 </html>
\ No newline at end of file

test/lib/reset.css

@@ -107,3 +107,19 @@ td.test-data-table-key {
     font-size: 12px;
     color: rgb(69, 162, 238)
 }
+
+.record-canvas .content-area {
+    display: none;
+    position: absolute;
+    background: #fff;
+    left: 10px;
+    top: 20px;
+    border: 2px solid #000;
+    padding: 10px;
+    z-index: 9999;
+    box-shadow: 0 0 3px #000;
+}
+.record-canvas textarea {
+    width: 300px;
+    height: 500px;
+}

test/lib/testHelper.js

@@ -55,6 +55,7 @@
      * @param {boolean} [opt.notMerge]
      * @param {Array.<Object>|Object} [opt.button] {text: ..., onClick: ...}, or an array of them.
      * @param {Array.<Object>|Object} [opt.buttons] {text: ..., onClick: ...}, or an array of them.
+     * @param {boolean} [opt.recordCanvas] 'ut/lib/canteen.js' is required.
      */
     testHelper.create = function (echarts, domOrId, opt) {
         var dom = getDom(domOrId);
@@ -69,6 +70,7 @@
         var buttonsContainer = document.createElement('div');
         var dataTableContainer = document.createElement('div');
         var infoContainer = document.createElement('div');
+        var recordCanvasContainer = document.createElement('div');
 
         title.setAttribute('title', dom.getAttribute('id'));
 
@@ -79,12 +81,14 @@
         buttonsContainer.className = 'test-buttons';
         dataTableContainer.className = 'test-data-table';
         infoContainer.className = 'test-info';
+        recordCanvasContainer.className = 'record-canvas';
 
         if (opt.info) {
             dom.className += ' test-chart-block-has-right';
             infoContainer.className += ' test-chart-block-right';
         }
 
+        left.appendChild(recordCanvasContainer);
         left.appendChild(buttonsContainer);
         left.appendChild(dataTableContainer);
         left.appendChild(chartContainer);
@@ -142,11 +146,70 @@
             infoContainer.innerHTML = createObjectHTML(opt.info, opt.infoKey || 'option');
         }
 
+        if (opt.recordCanvas) {
+            recordCanvasContainer.innerHTML = ''
+                + '<button>Show Canvas Record</button>'
+                + '<button>Clear Canvas Record</button>'
+                + '<div class="content-area"><textarea></textarea><br><button>Close</button></div>';
+            var buttons = recordCanvasContainer.getElementsByTagName('button');
+            var canvasRecordButton = buttons[0];
+            var clearButton = buttons[1];
+            var closeButton = buttons[2];
+            var recordArea = recordCanvasContainer.getElementsByTagName('textarea')[0];
+            var contentAraa = recordArea.parentNode;
+            canvasRecordButton.addEventListener('click', function () {
+                var content = [];
+                eachCtx(function (zlevel, ctx) {
+                    content.push('Layer zlevel: ' + zlevel, '\n\n');
+                    if (typeof ctx.stack !== 'function') {
+                        alert('Missing: <script src="ut/lib/canteen.js"></script>');
+                        return;
+                    }
+                    var stack = ctx.stack();
+                    for (var i = 0; i < stack.length; i++) {
+                        var line = stack[i];
+                        content.push(JSON.stringify(line), '\n');
+                    }
+                });
+                contentAraa.style.display = 'block';
+                recordArea.value = content.join('');
+            });
+            clearButton.addEventListener('click', function () {
+                eachCtx(function (zlevel, ctx) {
+                    ctx.clear();
+                });
+                recordArea.value = 'Cleared.';
+            });
+            closeButton.addEventListener('click', function () {
+                contentAraa.style.display = 'none';
+            });
+        }
+
+        function eachCtx(cb) {
+            var layers = chart.getZr().painter.getLayers();
+            for (var zlevel in layers) {
+                if (layers.hasOwnProperty(zlevel)) {
+                    var layer = layers[zlevel];
+                    var canvas = layer.dom;
+                    var ctx = canvas.getContext('2d');
+                    cb(zlevel, ctx);
+                }
+            }
+        }
+
         return chart;
     };
 
     /**
-     * opt: {boolean}: lazyUpdate, {boolean}: notMerge, {number}: height, {Object}: {width, height, draggable}
+     * @param {ECharts} echarts
+     * @param {HTMLElement|string} domOrId
+     * @param {Object} option
+     * @param {boolean|number} opt If number, means height
+     * @param {boolean} opt.lazyUpdate
+     * @param {boolean} opt.notMerge
+     * @param {number} opt.width
+     * @param {number} opt.height
+     * @param {boolean} opt.draggable
      */
     testHelper.createChart = function (echarts, domOrId, option, opt) {
         if (typeof opt === 'number') {

test/richText-fontsize.html

+
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/esl.js"></script>
+        <script src="lib/config.js"></script>
+        <!-- <script src="lib/jquery.min.js"></script> -->
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+                /*border: 1px solid #000;*/
+            }
+        </style>
+        <div id="main"><div>
+        <script>
+            require(['echarts'], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'), null, {});
+
+                window.onresize = function () {
+                    chart.resize();
+                };
+
+                var weatherIcons = {
+                    'Sunny': './data/weather/sunny_128.png',
+                    'Cloudy': './data/weather/cloudy_128.png',
+                    'Showers': './data/weather/showers_128.png'
+                };
+
+                chart.setOption({
+                    title: {
+                        text: "Expect only to change the fontsize of 'rate' rich text",
+                        left: 'center'
+                    },
+                    tooltip : {
+                        trigger: 'item',
+                        formatter: "{a} <br/>{b} : {c} ({d}%)"
+                    },
+                    legend: {
+                        // orient: 'vertical',
+                        // top: 'middle',
+                        bottom: 10,
+                        left: 'center',
+                        data: ['西凉', '益州','兖州','荆州','幽州']
+                    },
+                    series : [
+                        {
+                            type: 'pie',
+                            radius : '65%',
+                            center: ['50%', '50%'],
+                            selectedMode: 'single',
+                            data:[
+                                {
+                                    value:1548,
+                                    name: '幽州',
+                                    label: {
+                                        normal: {
+                                            formatter: [
+                                                '{title|{b}}{abg|}',
+                                                '  {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
+                                                '{hr|}',
+                                                '  {Sunny|}{value|202}{rate|55.3%}',
+                                                '  {Cloudy|}{value|142}{rate|38.9%}',
+                                                '  {Showers|}{value|21}{rate|5.8%}'
+                                            ].join('\n'),
+                                            backgroundColor: '#eee',
+                                            borderColor: '#777',
+                                            borderWidth: 1,
+                                            borderRadius: 4,
+                                            rich: {
+                                                title: {
+                                                    color: '#eee',
+                                                    align: 'center'
+                                                },
+                                                abg: {
+                                                    backgroundColor: '#333',
+                                                    width: '100%',
+                                                    align: 'right',
+                                                    height: 25,
+                                                    borderRadius: [4, 4, 0, 0]
+                                                },
+                                                Sunny: {
+                                                    height: 30,
+                                                    align: 'left',
+                                                    backgroundColor: {
+                                                        image: weatherIcons.Sunny
+                                                    }
+                                                },
+                                                Cloudy: {
+                                                    height: 30,
+                                                    align: 'left',
+                                                    backgroundColor: {
+                                                        image: weatherIcons.Cloudy
+                                                    }
+                                                },
+                                                Showers: {
+                                                    height: 30,
+                                                    align: 'left',
+                                                    backgroundColor: {
+                                                        image: weatherIcons.Showers
+                                                    }
+                                                },
+                                                weatherHead: {
+                                                    color: '#333',
+                                                    height: 24,
+                                                    align: 'left'
+                                                },
+                                                hr: {
+                                                    borderColor: '#777',
+                                                    width: '100%',
+                                                    borderWidth: 0.5,
+                                                    height: 0
+                                                },
+                                                value: {
+                                                    width: 20,
+                                                    padding: [0, 20, 0, 30],
+                                                    align: 'left'
+                                                },
+                                                valueHead: {
+                                                    color: '#333',
+                                                    width: 20,
+                                                    padding: [0, 20, 0, 30],
+                                                    align: 'center'
+                                                },
+                                                rate: {
+                                                    width: 40,
+                                                    align: 'right',
+                                                    fontSize: 60,
+                                                    padding: [0, 10, 0, 0]
+                                                },
+                                                rateHead: {
+                                                    color: '#333',
+                                                    width: 40,
+                                                    align: 'center',
+                                                    padding: [0, 10, 0, 0]
+                                                }
+                                            }
+                                        }
+                                    }
+                                },
+                                {value:535, name: '荆州'},
+                                {value:510, name: '兖州'},
+                                {value:634, name: '益州'},
+                                {value:735, name: '西凉'}
+                            ],
+                            itemStyle: {
+                                emphasis: {
+                                    shadowBlur: 10,
+                                    shadowOffsetX: 0,
+                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                                }
+                            }
+                        }
+                    ]
+                });
+            });
+        </script>
+    </body>
+</html>
\ No newline at end of file