Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度Echarts图表之散点图效果

option = {
  tooltip: {
    trigger: 'axis',
    textStyle: {
      color: '#fff'
    },
    axisPointer: {
      type: 'shadow',
      borderColor: 'rgba(124,128,244, .5)',
    },
    position: 'inside',
    formatter: (params) => {
      return `${params[0].axisValueLabel}-${params[0].seriesName}:${params[0].data[2]} <br /> ${params[1].axisValueLabel}-${params[1].seriesName}:${params[1].data[2]}`
    }
  },
  grid: {
    show: true,
    top: 30,
    left: '8%',
    right: '3%',
    bottom: 40,
    borderColor: "#fff"
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisPointer: {
      type: 'shadow'
    },
    axisLine: {
      lineStyle: {
        color: '#215AFF'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#103095'],
        width: 1,
        type: 'dashed'
      }
    }
  },
  yAxis: {
    type: 'category',
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#103095'],
        width: 1,
        type: 'dashed'
      }
    },
    nameTextStyle: {
      color: '#fff'
    },
    axisLine: {
      lineStyle: {
        color: "#215AFF"
      }
    },
    data: ['北京', '上海', '广州', '深圳', '杭州', '天津'],
    scale: true
  },
  series: [{
      name: '数据2',
      //  先X,后y
      data: [
        [0, 0, 22],
        [1, 1, 73],
        [2, 2, 83],
        [3, 3, 65],
        [4, 2, 89],
        [5, 4, 166],
        [6, 5, 244],
        [7, 5, 121],
        [8, 1, 232],
        [9, 3, 267],
        [10, 5, 289],
        [11, 2, 266],
      ],
      type: 'scatter',
      symbolSize: function(data) {
        return Math.sqrt(data[2])*3;
      },
      emphasis: {
        label: {
          show: false,
          formatter: function(param) {
            return param.data[2];
          },
          position: 'top'
        }
      },
      itemStyle: {
        shadowBlur: 15,
        shadowColor: 'rgba(0,0,0, 0.5)',
        shadowOffsetY: 5,
        color: '#ff9f7f',
      }
    },
    {
      name: '数据1',
      data: [
        [0, 2, 222],
        [1, 3, 223],
        [2, 4, 223],
        [3, 2, 155],
        [4, 5, 125],
        [5, 3, 267],
        [6, 1, 288],
        [7, 2, 213],
        [8, 3, 244],
        [9, 5, 166],
        [10, 2, 223],
        [11, 5, 188],
      ],
      type: 'scatter',
      symbolSize: function(data) {
        return Math.sqrt(data[2])*3;
      },
      emphasis: {
        label: {
          show: false,
          formatter: function(param) {
            return param.data[2];
          },
          position: 'top'
        }
      },
      itemStyle: {
        shadowBlur: 15,
        shadowColor: 'rgba(25, 100, 150, 0.5)',
        shadowOffsetY: 5,
        color: '#8379ea',
      }
    }
  ]
}

点击运行 》

点击展开全文

相关文章

  1. 百度Echarts图表之饼图多维度分析
  2. 百度Echarts环形百分比图形
  3. 百度echarts图表在legend中显示数字百分比
  4. 百度echarts图表无数据怎么优化
  5. 百度echarts图表之五行相生相克图