/**
* @Author Sean
* @Date 2019/5/8
*/
<template>
    <h-view class="public-style" style="height: 100%">
        <h-content>
          <div class="chart-wrapper" style="background: #50577D;">
            <div class="chart-type">可点击的折线图</div>
            <canvas id="clickLine"></canvas>
          </div>
        </h-content>
    </h-view>
</template>

<script>
    export default {
        data() {
            return {
               basicData : [
                {
                  "month": "Jan",
                  "city": "Tokyo",
                  "temperature": 7
                }, {
                  "month": "Jan",
                  "city": "London",
                  "temperature": 3.9
                }, {
                  "month": "Feb",
                  "city": "Tokyo",
                  "temperature": 6.9
                }, {
                  "month": "Feb",
                  "city": "London",
                  "temperature": 4.2
                }, {
                  "month": "Mar",
                  "city": "Tokyo",
                  "temperature": 9.5
                }, {
                  "month": "Mar",
                  "city": "London",
                  "temperature": 5.7
                }, {
                  "month": "Apr",
                  "city": "Tokyo",
                  "temperature": 14.5
                }, {
                  "month": "Apr",
                  "city": "London",
                  "temperature": 8.5
                }, {
                  "month": "May",
                  "city": "Tokyo",
                  "temperature": 18.4
                }, {
                  "month": "May",
                  "city": "London",
                  "temperature": 11.9
                }, {
                  "month": "Jun",
                  "city": "Tokyo",
                  "temperature": 21.5
                }, {
                  "month": "Jun",
                  "city": "London",
                  "temperature": 15.2
                }, {
                  "month": "Jul",
                  "city": "Tokyo",
                  "temperature": 25.2
                }, {
                  "month": "Jul",
                  "city": "London",
                  "temperature": 17
                }, {
                  "month": "Aug",
                  "city": "Tokyo",
                  "temperature": 26.5
                }, {
                  "month": "Aug",
                  "city": "London",
                  "temperature": 16.6
                }, {
                  "month": "Sep",
                  "city": "Tokyo",
                  "temperature": 23.3
                }, {
                  "month": "Sep",
                  "city": "London",
                  "temperature": 14.2
                }, {
                  "month": "Oct",
                  "city": "Tokyo",
                  "temperature": 18.3
                }, {
                  "month": "Oct",
                  "city": "London",
                  "temperature": 10.3
                }, {
                  "month": "Nov",
                  "city": "Tokyo",
                  "temperature": 13.9
                }, {
                  "month": "Nov",
                  "city": "London",
                  "temperature": 6.6
                }, {
                  "month": "Dec",
                  "city": "Tokyo",
                  "temperature": 9.6
                }, {
                  "month": "Dec",
                  "city": "London",
                  "temperature": 4.8
                }],
            }
        },
        created: function () {
        },
        mounted: function () {
          this.clickLine();//可点击的折线图
        },
        updated: function () {
        },
        destroyed: function () {
        },
        methods: {
          clickLine(){
            var chart = new F2.Chart({
              id: 'clickLine',
              pixelRatio: window.devicePixelRatio
            });
            chart.source(this.basicData);
            chart.tooltip({
              showCrosshairs: true
            });
            chart.legend({
              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();
              }
            });
            chart.line().position('month*temperature').color('city');
            chart.point().position('month*temperature').color('city').style({
              lineWidth: 1,
              stroke: '#fff'
            });
            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>