当前位置：首页 > article >正文

Echarts可视化

article 2024/11/14 20:47:29

echarts是一个基于javascripts的开源可视化图表库

画图步骤：

1.引入echarts.js文件

<script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>

也可将文件下载到本地通过src引入。

2. 准备一个呈现图表的盒子：

<div id="dd" style="width: 600px;height:400px;background-color: rgb(198, 229, 237);"></div>

3.基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('dd'));

4. 准备配置项：

option = {
			xAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					data: [120, 200, 150, 80, 70, 110, 130],
					type: 'bar'
				}
			]
		};

5. 将配置项设置给echarts实例对象：

myChart.setOption(option);

这样我们就可以获得一个echarts图了

柱形图：

代码如下：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>

</head>

<body>
	<div id="dd" style="width: 600px;height:400px;background-color: rgb(198, 229, 237);"></div>
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('dd'));
		option = {
			xAxis: {
				type: 'category',  //类目轴
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
				type: 'value'  //数据轴
			},
			series: [
				{
					data: [120, 200, 150, 80, 70, 110, 130],
					type: 'bar'
				}
			]
		};
		myChart.setOption(option);
	</script>
</body>

</html>

折线图：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
  <style>
    .box{
        width: 900px;
        height: 600px;
        background-color:aqua;
    }
</style>
</head>
<body>
  <div class="box"></div>
  <script>
     var myChart = echarts.init(document.querySelector(".box"));
     var options = {
      title:{
        text:'条形图',
        subtext:'',
        textstyle:{
          color:'red',
          fontSize:12
        },
        textAlign:'center',
        left:'50%'
      },
      xAxis:{
        type:'category',
        data:['浏览量','点赞数','转发数','收藏数','评论量'],
        name:'x轴'
      },
      yAxis:{
        type:'value',
        name:'y轴'
      },
      series:[{
        type:'line',
        data:[5000,800,200,300,150],
        
        
      },
      {
      
      type: 'line',
      
      data:[12000,2500,200,800,400],
    },]
      
      
     }
     myChart.setOption(options);
  </script>
</body>
</html>

散点图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
   
</head>
<body>
    <div id="scatter" style="width: 600px; height: 400px;"></div>
    <script>
        var scatter_chart = echarts.init(document.getElementById("scatter"));
        var scatter_option = {
            title:{
                text:"Echart"
            },
            xAxis:{},
            yAxis:{},
            series:[{
                symbolSize:20,
                data:[
                    [10.0, 8.04],
                    [8.0, 6.95],
                    [13.0, 7.58],
                    [9.0, 8.81],
                    [11.0, 8.33],
                    [14.0, 9.96],
                    [6, 7.24],
                    [4.2, 4.62],
                    [12.0, 10.84],
                    [7.0, 4.82],
                    [5.0, 5.58],
                ],
                type:'scatter'
            }]
        };
        scatter_chart.setOption(scatter_option);
    </script>
</body>
</html>

饼图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body>
    <div id="app" style="width: 600px;height: 400px;"></div>
    <script>
        
        // 3.将type设置为pie
        var myCharts = echarts.init(document.querySelector('#app'))
        // 需要设置给饼图的数据
        var sl = [
            {
                name: '2018',
                value: '30'
            },
            {
                name: '2019',
                value: '10'
            },
            {
                name: '2020',
                value: '10'
            },
            {
                name: '2021',
                value: '10'
            },
            {
                name: '2022',
                value: '20'
            },
            {
                name: '2023',
                value: '10'
            }
            
        ]
        var option = {
          legen:{
            show:true,
            align:'left',
            left:0,
          },
            // 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了
            series: [
                {
                    type: 'pie',
                    data: sl,
                    radius:["20%","60%"],   
                    // roseType:"area"
                }
            ]
        }
        myCharts.setOption(option)
    </script>
</body>
</html>

roseType:"area" 可以将饼图设置为玫瑰图。

查看全文

http://www.kler.cn/a/289497.html