/**
* @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">柱形图折线图</div>
            <canvas id="columnAndLine"></canvas>
          </div>

          <div class="chart-wrapper">
            <div class="chart-type">曲线折线图</div>
            <canvas id="curveLine"></canvas>
          </div>

          <div class="chart-wrapper">
            <div class="chart-type">层叠点线图</div>
            <canvas id="movementsLine"></canvas>
          </div>

          <div class="chart-wrapper">
            <div class="chart-type">某国结婚年龄走势图</div>
            <canvas id="marryLine"></canvas>
          </div>
        </h-content>
    </h-view>
</template>

<script>
    export default {
        data() {
            return {
             columnAndLineData : [{
                name: 'Jon',
                score: 282,
                avgScore: 94
              }, {
                name: 'Aaron',
                score: 208,
                avgScore: 41.6
              }, {
                name: 'Warren',
                score: 186,
                avgScore: 46.5
              }, {
                name: 'David',
                score: 184,
                avgScore: 30.67
              }, {
                name: 'Joel',
                score: 177,
                avgScore: 44.25
              }, {
                name: 'Kyle',
                score: 150,
                avgScore: 50
              }, {
                name: 'Jordan',
                score: 148,
                avgScore: 24.67
              }, {
                name: 'Jack',
                score: 138,
                avgScore: 34.5
              }, {
                name: 'Kuldeep',
                score: 130,
                avgScore: 32.5
              }, {
                name: 'Max',
                score: 128,
                avgScore: 32
              }, {
                name: 'Angus',
                score: 127,
                avgScore: 62.5
              }],
            }
        },
        created: function () {
        },
        mounted: function () {
          this.columnAndLine();//柱形图折线图
        },
        updated: function () {
        },
        destroyed: function () {
        },
        methods: {
          columnAndLine(){
            var legendItems = [{
              name: '个人分数',
              marker: 'square',
              fill: '#FACC14',
              checked: true
            }, {
              name: '平均分数',
              marker: function marker(x, y, r, ctx) {
                ctx.lineWidth = 1;
                ctx.strokeStyle = ctx.fillStyle;
                ctx.moveTo(x - r - 3, y);
                ctx.lineTo(x + r + 3, y);
                ctx.stroke();
                ctx.arc(x, y, r, 0, Math.PI * 2, false);
                ctx.fill();
              },
              fill: '#000',
              checked: true
            }];

            function findLegendItem(name) {
              var index = void 0;
              for (var i = 0; i < legendItems.length; i++) {
                if (legendItems[i].name === name) {
                  index = i;
                  break;
                }
              }
              return index;
            }

            var chart = new F2.Chart({
              id: 'columnAndLine',
              pixelRatio: window.devicePixelRatio,
              padding: ['auto', 'auto', 90, 'auto']
            });

            chart.source(columnAndLineData, {
              score: {
                tickInterval: 50,
                alias: '个人分数'
              },
              avgScore: {
                ticks: [0, 17, 33, 50, 67, 83, 100],
                alias: '平均分数'
              }
            });
            chart.axis('avgScore', {
              grid: null
            });
            chart.axis('name', {
              label: {
                rotate: Math.PI / 3,
                textAlign: 'start',
                textBaseline: 'middle'
              }
            });

            // 自定义图例内容以及交互行为
            chart.legend({
              custom: true,
              items: legendItems,
              onClick: function onClick(ev) {
                var item = ev.clickedItem;
                var name = item.get('name');
                var checked = item.get('checked');
                var children = item.get('children');
                if (checked) {
                  var markerFill = children[0].attr('fill');
                  var textFill = children[1].attr('fill');
                  children[0].set('_originColor', markerFill); // 缓存 marker 原来的颜色
                  children[1].set('_originColor', textFill); // 缓存文本原来的颜色
                }
                var geoms = chart.get('geoms');
                for (var i = 0; i < geoms.length; i++) {
                  var geom = geoms[i];

                  if (geom.getYScale().alias === name)
                    if (!checked) {
                      geom.show();
                      children[0].attr('fill', children[0].get('_originColor'));
                      children[1].attr('fill', children[1].get('_originColor'));
                    } else {
                      geom.hide();
                      children[0].attr('fill', '#bfbfbf'); // marker 置灰
                      children[1].attr('fill', '#bfbfbf'); // 文本置灰 置灰
                    }
                  item.set('checked', !checked);
                  legendItems[findLegendItem(name)].checked = !checked;
                }
              }
            });

            // tooltip 和图例的联动
            chart.tooltip({
              showCrosshairs: true,
              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(legendItems);
              }
            });

            chart.interval().position('name*score').color('#FACC14');
            chart.line().position('name*avgScore').color('#000');
            chart.point().position('name*avgScore').size(3).style({
              fill: '#000',
              stroke: '#fff',
              lineWidth: 1
            });
            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>
