eachrts注释解释（散点图）

<template>
  <div>
    <div id="chart_example"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';


export default {
  data(){
    return{
      data: [
        [
          [28604, 77, 17096869, 'Australia', 1990],
          [31163, 77.4, 27662440, 'Canada', 1990],
          [1516, 68, 1154605773, 'China', 1990],
          [13670, 74.7, 10582082, 'Cuba', 1990],
          [28599, 75, 4986705, 'Finland', 1990],
          [29476, 77.1, 56943299, 'France', 1990],
          [31476, 75.4, 78958237, 'Germany', 1990],
          [28666, 78.1, 254830, 'Iceland', 1990],
          [1777, 57.7, 870601776, 'India', 1990],
          [29550, 79.1, 122249285, 'Japan', 1990],
          [2076, 67.9, 20194354, 'North Korea', 1990],
          [12087, 72, 42972254, 'South Korea', 1990],
          [24021, 75.4, 3397534, 'New Zealand', 1990],
          [43296, 76.8, 4240375, 'Norway', 1990],
          [10088, 70.8, 38195258, 'Poland', 1990],
          [19349, 69.6, 147568552, 'Russia', 1990],
          [10670, 67.3, 53994605, 'Turkey', 1990],
          [26424, 75.7, 57110117, 'United Kingdom', 1990],
          [37062, 75.4, 252847810, 'United States', 1990]
        ],
        [
          [44056, 81.8, 23968973, 'Australia', 2015],
          [43294, 81.7, 35939927, 'Canada', 2015],
          [13334, 76.9, 1376048943, 'China', 2015],
          [21291, 78.5, 11389562, 'Cuba', 2015],
          [38923, 80.8, 5503457, 'Finland', 2015],
          [37599, 81.9, 64395345, 'France', 2015],
          [44053, 81.1, 80688545, 'Germany', 2015],
          [42182, 82.8, 329425, 'Iceland', 2015],
          [5903, 66.8, 1311050527, 'India', 2015],
          [36162, 83.5, 126573481, 'Japan', 2015],
          [1390, 71.4, 25155317, 'North Korea', 2015],
          [34644, 80.7, 50293439, 'South Korea', 2015],
          [34186, 80.6, 4528526, 'New Zealand', 2015],
          [64304, 81.6, 5210967, 'Norway', 2015],
          [24787, 77.3, 38611794, 'Poland', 2015],
          [23038, 73.13, 143456918, 'Russia', 2015],
          [19360, 76.5, 78665830, 'Turkey', 2015],
          [38225, 81.4, 64715810, 'United Kingdom', 2015],
          [53354, 79.1, 321773631, 'United States', 2015]
        ]
      ],
      dimensions: ['product', '2015', '2016', '2017'],
      source: [
        // ['product', '2015', '2016', '2017'],
        // ['Matcha Latte', 43.3, 85.8, 93.7],
        // ['Milk Tea', 83.1, 73.4, 55.1],
        // ['Cheese Cocoa', 86.4, 65.2, 82.5],
        // ['Walnut Brownie', 72.4, 53.9, 39.1]
        // 或者一下形式
        { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
        { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
        { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
        { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }

      ]
    }
  },
  mounted(){
    this.initEcharts()
  },
  methods:{
    initEcharts(){
      // 监听浏览器的大小
      var myChart = echarts.init(document.getElementById('chart_example'));
      window.onresize = function() {
        myChart.resize();
        // 给表格一个默认大小
        // myChart.resize({
        //   width: 800,
        //   height: 400
        // });
      };
      // 给默认的宽高
      // let myChart = echarts.init(document.getElementById('chart_example'),null,{width:800,height:500});
      let option = {
        // 标题
        title: {
          text: 'ECharts 示例'
        },
        // 全局调色盘。
        color: ['#e69d87'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {
            type : 'shadow'
          }
        },
        backgroundColor: {
          type: 'linear',// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          // type: 'radial', // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
          // x: 0.3,
          // y: 0.3,
          // r: 0.8,
          x: 0,
          y: 1,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0, // 0% 处的颜色
              color: '#f7f8fa'
            },
            // {
            //   offset: 0.5,
            //   color: '#61a0a8'
            // },
            {
              offset: 1,  // 100% 处的颜色
              color: '#f7f8fa'
            }
          ],
          global: false // 缺省为 false
        },
        // {
        //   image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
        //   repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
        // },
        // 直角坐标系内绘图网格
        grid: {
          left: 10,
          containLabel: true,//grid 区域是否包含坐标轴的刻度标签。
          bottom: 10,
          top: 10,
          right: 30
        },
        // x轴
        xAxis : [
          {
            type : 'category', //类别
            // data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
            // data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
            // axisTick: {
            //   alignWithLabel: true
            // },
            splitLine: {
              show: false //是否显示分隔线。默认数值轴显示，类目轴不显示。
            }
          },
          
        ],
        // y轴
        yAxis: {},
        // yAxis : [
          // {
          //   type : 'value' ,// 数值轴，适用于连续数据。
          // }
          // {
          //   splitLine: {
          //     show: false
          //   },
          //   scale: true //是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。
          // }
          
        // ],
        // 局部设置
        // series : [
          // 这是一个条形图
          // {
          //   name:'每月花费',
          //   type:'bar',
          //   barWidth: '60%',
          //   data:[995,666,444,858,654,236,645,546,846,225,547,356],
          //   color: [
          //     '#759aa0',
          //   ]
          // },
          // 这是一个扇形图
          // {
          //   type: 'pie',
          // 此系列自己的调色盘。
          //   color: [
          //     '#96BFFF'
          //   ]
          // }
        // ],
        dataset:{
          // （I）提供数据，（II）指定数据到视觉的映射。
          source:this.source,
          dimensions:this.dimensions
        },
        series:[
          // {
          //   type:'bar',
          //   name:'2015',
          //   data:[89.3,92.1,94.4,85.4]
          // },
          // {
          //   type:'bar',
          //   name:'2016',
          //   data: [95.8, 89.4, 91.2, 76.9]
          // }
          {
            type:'bar',
          },
          {
            type:'bar',
          },
          {
            type:'bar',
          }
        ]
        // series: [
        //   {
        //     name: '1990',
        //     data: this.data[0],
        //     type: 'scatter', // 散点（气泡）图
        //     symbolSize: function(data) {
        //       return Math.sqrt(data[2]) / 5e2; //一个数的平方根 5e2就是500的
        //     }, //标记的大小，
        //     // // 高亮样式。
        //     emphasis: { // 高亮的图形和标签样式。 高亮后的放大效果。
        //       focus: 'series', // 聚焦当前高亮的数据所在的系列的所有图形。
        //       label: {
        //         show: true, //是否显示标签。
        //         // formatter: 'This is a normal label.',
        //         formatter: function(param) { //标签内容格式器的文字
        //           return param.data[3];
        //         },
        //         position: 'top'
        //       }
        //     },
        //     itemStyle: {
        //       shadowBlur: 10, //图形阴影的模糊大小
        //       shadowColor: 'rgba(120, 36, 10, 0.5)', //图片的阴影
        //       shadowOffsetY: 5, //阴影垂直方向上的偏移距离。
        //       color: { //标记图片的颜色
        //         type: 'radial',
        //         x: 0.4,
        //         y: 0.3,
        //         r: 1,
        //         colorStops: [
        //           {
        //             offset: 0,
        //             color: 'rgb(251, 118, 123)'
        //           },
        //           {
        //             offset: 1,
        //             color: 'rgb(204, 46, 72)'
        //           }
        //         ]
        //       }
        //     }
        //   },
        //   {
        //     name: '2015',
        //     data: this.data[1],
        //     type: 'scatter',
        //     symbolSize: function(data) {
        //       return Math.sqrt(data[2]) / 5e2;
        //     },
        //     emphasis: {
        //       focus: 'series',
        //       label: {
        //         show: true,
        //         formatter: function(param) {
        //           return param.data[3];
        //         },
        //         position: 'top'
        //       }
        //     },
        //     itemStyle: {
        //       shadowBlur: 10,
        //       shadowColor: 'rgba(25, 100, 150, 0.5)',
        //       shadowOffsetY: 5,
        //       color: {
        //         type: 'radial',
        //         x: 0.4,
        //         y: 0.3,
        //         r: 1,
        //         colorStops: [
        //           {
        //             offset: 0,
        //             color: 'rgb(129, 227, 238)'
        //           },
        //           {
        //             offset: 1,
        //             color: 'rgb(25, 183, 207)'
        //           }
        //         ]
        //       }
        //     }
        //   }
        // ]
      };
      myChart.setOption(option);
      //建议加上以下这一行代码，不加的效果图（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize',function() {myChart.resize()});
    }
  }
}
</script>

<style lang="scss" scoped>
 #chart_example,
  html,
  body {
    width: 100%;
  }
  #chart_example {
    height: 400px;
  }
</style>