bootstrap--【Echarts笔记】

T7xxx！

已于 2022-04-25 08:48:08 修改

阅读量809

点赞数

分类专栏： 11 文章标签： bootstrap html

于 2022-04-24 14:54:25 首次发布

本文链接：https://blog.youkuaiyun.com/lj1641719803hh/article/details/124382794

版权

本文主要介绍了如何使用Echarts创建柱状图，包括代码实现和最终的展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

柱状图

代码部分

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
 <!--引入ECharts脚本-->
  <script src="js/echarts.min.js"></script>
</head>

<body>
  <!---为ECharts准备一个具备大小（宽高）的DOM-->
  <div id="main" style="width: 600px; height: 400px"></div>
  <script type="text/javascript">
    //基于准备好的DOM，初始化ECharts图表
    var myChart = echarts.init(document.getElementById("main"));
    //指定图表的配置项和数据
    var option = {
   
		title: {
   
			text:"销售统计表",
		},
      tooltip: {
   
        // 提示框是一个还是整个x轴的数据,靠近x轴的时候就会触发还是靠近点才会触发
        trigger: 'axis',
        // 这个是标杆
        axisPointer: {
     //设置坐标轴指示器，坐标轴触发有效
          type: 'shadow'  //设置坐标轴默认为直线，可选为:'line'|'shadow'
        }
      },
// tooltip由axisPointer和trigger组成
      legend: {
   
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子'

最低0.47元/天解锁文章