(学习笔记)Echarts可视化的简单应用

效果图

---

---

---

代码部分

body+js

       <div id="container" style="height: 100%"></div>

        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

        <script type="text/javascript">
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				
				
				var option = {
				  tooltip: {
				    trigger: 'axis',
				    axisPointer: {
				      type: 'shadow' 
				    }
				  },
				  legend: {},
				  grid: {
				    left: '3%',
				    right: '4%',
				    bottom: '3%',
				    containLabel: true
				  },
				  title:{
				    text: 'MT数码店21年下半年度iPhone销量榜'
				  },
				  xAxis: {
				    type: 'value',
				    axisLabel: {
				      formatter: '{value} 台'
				    }
				  },
				  yAxis: {
				    type: 'category',
				    data: ['7月', '8月', '9月', '10月', '11月', '12月']
				  },
				  series: [
				    {
				      name: 'iPhone11',
				      type: 'bar',
				      stack: 'total',
				      label: {
				        show: true
				      },
				      emphasis: {
				        focus: 'series'
				      },
				      data: [320, 302, 301, 334, 390, 330, 320]
				    },
				    {
				      name: 'iPhone11pro',
				      type: 'bar',
				      stack: 'total',
				      label: {
				        show: true
				      },
				      emphasis: {
				        focus: 'series'
				      },
				      data: [120, 132, 101, 134, 90, 230, 210]
				    },
				    {
				      name: 'iPhone12pro',
				      type: 'bar',
				      stack: 'total',
				      label: {
				        show: true
				      },
				      emphasis: {
				        focus: 'series'
				      },
				      data: [220, 182, 191, 234, 290, 330, 310]
				    },
				    {
				      name: 'iPhone13mini',
				      type: 'bar',
				      stack: 'total',
				      label: {
				        show: true
				      },
				      emphasis: {
				        focus: 'series'
				      },
				      data: [150, 212, 201, 154, 190, 330, 410]
				    },
				    {
				      name: 'iPhone13pro',
				      type: 'bar',
				      stack: 'total',
				      label: {
				        show: true
				      },
				      emphasis: {
				        focus: 'series'
				      },
				      data: [820, 832, 901, 934, 1290, 1330, 1320]
				    }
				  ]
				};
				
				if (option && typeof option === 'object') {
				    myChart.setOption(option);
				}

        </script>