Echarts的使用

最新推荐文章于 2024-06-07 09:33:01 发布

晨曦@x

最新推荐文章于 2024-06-07 09:33:01 发布

阅读量22

点赞数

文章标签： echarts 信息可视化数据分析

本文链接：https://blog.csdn.net/m0_72231852/article/details/134157014

版权

1:ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。Apache ECharts

使用Echarts可以让我们再写页面时，让我们的页面的某些内容以图表的形式呈现在页面上，这样会使我们要呈现的内容更直观。

下面是我用Echarts来写的一个例子

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.js"></script>
   <style>
    body{
        margin:0;
        padding:0;
    }
    #main{
        width:100%;
        height:100vh;
    }
   </style>
</head>
<body>
            <div id="main"></div>
            <script type="text/javascript">
                 // 基于准备好的dom，初始化echarts实例
   var myChart=echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option={
  color:['#000','#888'],
  title:{
    text:'实例'
  },
  tooltip: {},
        legend: {
          data: ['销量']
        },
  xAxis:{
    data:['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis:{},
series:[{
  name:'销量',
  type:'bar',
  data:[10,20,30,40,50,60]
},
{
  name:'价格',
  type:'bar',
  data:[20,30,40,50,60,70]
}
]
};
myChart.setOption(option);
window.addEventListener('resize',function(){
  myChart.resize();

})
</script>
    
</body>
</html>

效果展示：

总结：Echarts可以生动的展示我们的数据，而且Echarts还有非常多的图表类型，你可以按你的喜好选择不同的图表来呈现你的内容。

晨曦@x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts的使用

总结：Echarts可以生动的展示我们的数据，而且Echarts还有非常多的图表类型，你可以按你的喜好选择不同的图表来呈现你的内容。使用Echarts可以让我们再写页面时，让我们的页面的某些内容以图表的形式呈现在页面上，这样会使我们要呈现的内容更直观。图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。下面是我用Echarts来写的一个例子。1:ECharts是一款基于。
复制链接

扫一扫