/**
* @Author Sean
* @Date 2019/5/8
*/
<template>
    <h-view class="public-style" style="height: 100%">
        <h-content>
          <div class="chart-wrapper">
            <div class="chart-type">带标题的tooltip</div>
            <canvas id="titleTooltip"></canvas>
          </div>

          <div class="chart-wrapper">
            <div class="chart-type">X轴提示</div>
            <canvas id="x_toast"></canvas>
          </div>
        </h-content>
    </h-view>
</template>

<script>
    export default {
        data() {
            return {
              basicData : [
                {
                  label: 'Mon.',
                  type: 'series1',
                  value: 2800
                }, {
                  label: 'Mon.',
                  type: 'series2',
                  value: 2260
                }, {
                  label: 'Tue.',
                  type: 'series1',
                  value: 1800
                }, {
                  label: 'Tue.',
                  type: 'series2',
                  value: 1300
                }, {
                  label: 'Wed.',
                  type: 'series1',
                  value: 950
                }, {
                  label: 'Wed.',
                  type: 'series2',
                  value: 900
                }, {
                  label: 'Thu.',
                  type: 'series1',
                  value: 500
                }, {
                  label: 'Thu.',
                  type: 'series2',
                  value: 390
                }, {
                  label: 'Fri.',
                  type: 'series1',
                  value: 170
                }, {
                  label: 'Fri.',
                  type: 'series2',
                  value: 100
                }],
          toastData :[
            {
              "year": "2010",
              "type": "Thailand",
              "value": 1645304
            }, {
              "year": "2011",
              "type": "Thailand",
              "value": 1457795
            }, {
              "year": "2012",
              "type": "Thailand",
              "value": 2453717
            }, {
              "year": "2013",
              "type": "Thailand",
              "value": 2457057
            }, {
              "year": "2014",
              "type": "Thailand",
              "value": 1880007
            }, {
              "year": "2015",
              "type": "Thailand",
              "value": 1913002
            }, {
              "year": "2016",
              "type": "Thailand",
              "value": 1808625
            }, {
              "year": "2010",
              "type": "ASEAN",
              "value": 1456866
            }, {
              "year": "2011",
              "type": "ASEAN",
              "value": 1536834
            }, {
              "year": "2012",
              "type": "ASEAN",
              "value": 1784263
            }, {
              "year": "2013",
              "type": "ASEAN",
              "value": 1982417
            }, {
              "year": "2014",
              "type": "ASEAN",
              "value": 2104870
            }, {
              "year": "2015",
              "type": "ASEAN",
              "value": 1983965
            }, {
              "year": "2016",
              "type": "ASEAN",
              "value": 1908434
            }],
            }
        },
        created: function () {
        },
        mounted: function () {
          this.titleTooltip();//带标题的tooltip
          this.x_toast();//X轴提示
        },
        updated: function () {
        },
        destroyed: function () {
        },
        methods: {
          titleTooltip(){
            var chart = new F2.Chart({
              id: 'titleTooltip',
              padding: [60, 'auto', 'auto'],
              pixelRatio: window.devicePixelRatio
            });

            chart.source(this.basicData);

            chart.legend(false);

            // Tooltip 配置
            chart.tooltip({
              showTitle: true // 展示  tooltip 的标题
            });

            chart.axis('label', {
              line: F2.Global._defaultAxis.line,
              grid: null
            });
            chart.axis('value', {
              line: null,
              grid: F2.Global._defaultAxis.grid,
              label: function label(text, index, total) {
                var textCfg = {};
                if (index === 0) {
                  textCfg.textAlign = 'left';
                } else if (index === total - 1) {
                  textCfg.textAlign = 'right';
                }
                return textCfg;
              }
            });
            chart.interval().position('label*value').color('type').adjust({
              type: 'dodge',
              marginRatio: 1 / 32
            });
            chart.render();
          },
          x_toast(){
            var chart = new F2.Chart({
              id: 'x_toast',
              padding: ['auto', 'auto', 'auto', 16],
              pixelRatio: window.devicePixelRatio
            });
            chart.source(this.toastData, {
              year: {
                range: [0.16, 0.95]
              },
              value: {
                tickInterval: 500000,
                formatter: function formatter(val) {
                  return String(Math.floor(val * 100) / 100).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                }
              }
            });
            chart.axis('value', {
              label: function label(text, index, total) {
                var cfg = {
                  textAlign: 'start',
                  top: true,
                  text: text
                };
                if (index === total - 1) {
                  cfg.text = cfg.text + ' vehicles';
                }
                return cfg;
              }
            });

            chart.guide().rect({
              start: ['0%', '0%'],
              end: ['12%', '99%'],
              style: {
                lineWidth: 1,
                stroke: '#fff',
                fill: '#fff',
                opacity: 1
              }
            });
            chart.legend({
              marker: 'square'
            });
            // tooltip 与图例结合
            chart.tooltip({
              showXTip: true,
              xTipBackground: {
                stroke: '#fff',
                lineWidth: 1,
                radius: 3
              },
              custom: true, // 自定义 tooltip 内容框
              onChange: function onChange(obj) {
                var legend = chart.get('legendController').legends.top[0];
                var tooltipItems = obj.items;
                var legendItems = legend.items;
                var map = {};
                legendItems.map(function(item) {
                  map[item.name] = _.clone(item);
                });
                tooltipItems.map(function(item) {
                  var name = item.name;
                  var value = item.value;
                  if (map[name]) {
                    map[name].value = value;
                  }
                });
                legend.setItems(_.values(map));
              },
              onHide: function onHide() {
                var legend = chart.get('legendController').legends.top[0];
                legend.setItems(chart.getLegendItems().country);
              }
            });
            chart.interval().position('year*value').color('type', ['#ab5787', '#51b2e5']).adjust({
              type: 'dodge',
              marginRatio: 0.3
            });
            chart.render();
          }
        }
    }
</script>

<style scoped lang="less" rel="stylesheet">
    .public-style {
        .content {
          .chart-wrapper{
            .chart-type{
              width: 100%;
              height: 30px;
              font-size: 16px;
              color: #7b7b7b;
              display: flex;
              display: -webkit-flex;
              justify-content: center;
              -webkit-justify-content: center;
              align-items: center;
              -webkit-align-items: center;
            }
            canvas{
              width:100%;
              height:100%;
            }
          }
        }
    }
</style>
