echarts图表

1.折线图(常用的折线图)

<div id="main" style="width: 100%;height:400px;"></div>	
<script src="https://lib.baomitu.com/echarts/4.7.0/echarts-en.common.js"></script>
<script type="text/javascript">
  // 折线图
 var myChart = echarts.init(document.getElementById('main'));
option = {
	// 标题
	title: {
		text: '折线图'
	},
	// 鼠标移入显示坐标信息
	tooltip: {
     trigger: 'axis'
   },
   // 折线图上方的分类提示
   legend: {
       data: ['折线1', '折线2']
   },
   // 点击下载图标，保存为图片
   toolbox: {
     feature: {
       saveAsImage: {}
     }
   },
   grid: {
     left: '3%',
     right: '4%',
     bottom: '3%',
     containLabel: true
   },
	// x轴
   xAxis: {
       type: 'category',
       boundaryGap: false,
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   },
   // y轴
   yAxis: {
       type: 'value'
       // min: 0  max:1400 设置两个边界值
   },
   series: [
     {
         name: '折线1',
         type: 'line',
         stack: '总量',
         smooth: true, // 光滑的曲线
         data: [120, 132, 101, 134, 90, 230, 210],
          // areaStyle 面积区域
         areaStyle: {}
     },
     {
         name: '折线2',
         type: 'line',
         stack: '总量',
         smooth: true, // 光滑的曲线
         data: [220, 182, 191, 234, 290, 330, 310],
         // label折线上的数值显示
         label: {
           normal: {
             show: true,
             position: 'top'
           }
         },
         // areaStyle 面积区域
         areaStyle: {}
     },
     ]
};
myChart.setOption(option);
// 自适应 随着屏幕尺寸改变，折线图自适应 width:100%
window.addEventListener("resize", () => { 
  myChart.resize()
})
</script>

2.饼状图

 <div id="chart1" style="width: 100%;height:400px;"></div></div>
 <div id="drug-addiction-chart" style="width: 100%;height:400px;"></div>
  var myChart1 = echarts.init(document.getElementById('chart1'));
  let dataFilter = [
    {
      name:"甘肃",
      value:'10',
      percent: (10 / 38 * 100).toFixed(2) + '%'
    },
    {
      name:"兰州",
      value:'8',
      percent: (8 / 38 * 100).toFixed(2) + '%'
    },
    {
      name:"济南",
      value:'9',
      percent: (9 / 38 * 100).toFixed(2) + '%'
    },
    {
      name:"上海",
      value:'5',
      percent: (5 / 38 * 100).toFixed(2) + '%'
    },
    {
      name:"徐州",
      value:'6',
      percent: (6 / 38 * 100).toFixed(2) + '%'
    }
  ]
  let option1 = {
    baseOption: {
      title: {
        text: '饼状图'
        // subtext: '',
        // x: 'center'
      },
      // 提示框
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}({d}%)"
      },
      //图例，每个图表最多仅有一个图例  （左上角垂直显示）orient: 'vertical',left: 'left'
      legend: {
        orient: 'vertical',
        icon: 'circle', //图例的图标
        bottom: 0,
        data: ["甘肃","兰州","济南","上海","徐州"],
        formatter: (name) => {
          let pieLegendVale = {}
          dataFilter.filter((item, index) => {
            if (item.name === name) {
              pieLegendVale = item
            }
          })
          return pieLegendVale.name + '      ' + pieLegendVale.percent + '      ' + pieLegendVale.value
        }
      },
      color: ['rgb(203,155,255)', 'rgb(149,162,255)', 'rgb(58,186,255)', 'rgb(119,168,249)', 'rgb(235,161,159)'],//设置颜色
      // 系列列表,每个系列通过 type 决定自己的图表类型
      series: [
        {
          name: '',
          type: 'pie',
          radius: '50%',  //图的大小
          center: ['50%', '45%'], //图的位置，距离左跟上的位置
          data:[
            {
              name:"甘肃",
              value:'10'
            },
            {
              name:"兰州",
              value:'8'
            },
            {
              name:"济南",
              value:'9'
            },
            {
              name:"上海",
              value:'5'
            },
            {
              name:"徐州",
              value:'6'
            }
          ],
          // itemStyle 百分比在饼图内显示
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'inner',
                formatter: '{b}: \n ({d}%)'
              }
            }
          }
        }
      ]
    }
  }
  myChart1.setOption(option1)

   // 饼状图
  let myCharts = echarts.init(document.getElementById('drug-addiction-chart'));
  // score: 0到100的随机数
  let score = Math.ceil(Math.random() * 100); 
  let option = {
    title: {
      text: '饼状图'
      // show: false
    },
    // color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
    color: ['#1976d2', '#cccccc', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c23531', '#c4ccd3'],
    series: [{
      name: '心里健康度',
      type: 'pie',
      // 第一个参数是内圆半径，第二个参数是外圆半径，相对饼图的宿主div大小
      radius: ['48%', '60%'],
      avoidLabelOverlap: false,
      // 禁用饼状图  鼠标移入时的悬浮动画效果
      animation: false,
      label: {
        normal: {
          show: true,
          // 设置字体的位置和样式  饼状图中的文字
          position: 'center',
          textStyle: {
            fontSize: '42',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [{
        value: score,
        name: score
      },
      {
        value: 100 - score, 
        name: ''
      },
      ]
    }]
  }
  myCharts.setOption(option);