用思源笔记绘图 |Echarts

饼图

{
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
    toolbox: {
            show: true,
	    orient:"vertical",

            feature: {
                dataView: {show:true},
                saveAsImage: {
                    excludeComponents :['toolbox'],
                    pixelRatio: 1
                }
	  
            },
	    top:'bottom'
        },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 3, name: '吃饭' },
        { value: 8, name: '睡觉' },
        { value: 13, name: '打豆豆' },

      ]
    }
  ]
}
​

散点图

{
  xAxis: {},
  yAxis: {},
    toolbox: {
            show: true,
	    orient:"vertical",

            feature: {
                dataView: {show:true},
                saveAsImage: {
                    excludeComponents :['toolbox'],
                    pixelRatio: 1
                }
	  
            },
	    top:'bottom'
        },
  series: [
    {
      symbolSize: 20,
      data: [
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81],
        [11.0, 8.33],
        [14.0, 7.66],
        [13.4, 6.81],
        [10.0, 6.33],
        [14.0, 8.96],
        [12.5, 6.82],
        [9.15, 7.2],
        [11.5, 7.2],
        [3.03, 4.23],
        [12.2, 7.83],
        [2.02, 4.47],
        [1.05, 3.33],
        [4.05, 4.96],
        [6.03, 7.24],
        [12.0, 6.26],
        [12.0, 8.84],
        [7.08, 5.82],
        [5.02, 5.68]
      ],
      type: 'scatter'
    }
  ]
}
​

折线图

{
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
    toolbox: {
            show: true,
	    orient:"vertical",

            feature: {
                dataView: {show:true},
                saveAsImage: {
                    excludeComponents :['toolbox'],
                    pixelRatio: 1
                }
	  
            },
	    top:'bottom'
        },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
}
​

网络图

关系图

参考

• Examples - Apache ECharts