Echarts入门

echarts的引入

• 在原生html中引入echarts
  你可以在官方下载链接获得echarts的js包

  <!--下载包的方式-->
  <script src="你的echar.js的路径"></script>
  <!--引入网络链接的方式-->
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.common.js"></script>

• 在vue中引入echarts

echarts的使用

echarts会自动适应和匹配容器的大小

• 通过js来使用echar
  首先先定义一个容器，用来防止echart图标

<div id="echart-box" style="width:600px;height:600px;"></div>
<script>
//初始化一个echart
var myEchart = echarts.init(document.getElementById('echart-box')
//指定图表的配置
var option = {
    title="老陈echarts Demo1",
    tooltip:{},//提示框
    legend:{//图标
        data:["人数"]
    },
    xAxis:{
        data:['vue','react','angular','jquery']
    },
    yAxis:{},//默认为数字
    series:[
    	{
			name:"人数",
			type:"bar",
			data:[2000,1000,500,2200]
		}
	mychart.setOption(option)
}

echarts配置讲解