Echart 的实例

最新推荐文章于 2025-06-06 14:59:46 发布

csdn_chenli

最新推荐文章于 2025-06-06 14:59:46 发布

阅读量5.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/csdn_chenli/article/details/51507973

web前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了Echarts的柱状图、折线图和饼图的实现方法，包括数据展示、图表样式配置等。通过示例代码详细展示了如何创建柱状图、折线图和饼图，帮助读者理解Echarts的用法。

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

这是我自己做的一些实例有Echarts 部分属性的注释

学习网站：http://echarts.baidu.com/index.html

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

实例1: 柱状图实现Echarts series数组显示

源代码

<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    
   <script src="echarts.min.js"></script>
</header>
<body>
    
    <div id="main" style="width: 100%;height:250px;"></div>
   <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
       var option = {
           barWidth:30,//条形的宽的为30
           tooltip: {},
           legend: {//说明
                   //orient: 'vertical', //说明显示在的位置所在
                   // center: 'center ',//说明的位置居中显示默认居中横排显示
                   data:['累积', '新增']//数据说明
                   },
           xAxis: {//X轴上的内容
                   type : 'category',
                   axisLabel:{
                       //横坐标上的文字斜着显示文字颜色 begin
                           interval:0,
                           rotate:45,
                           margin:2,
                           textStyle:{color:"#ec6869" }
                       //横坐标上的文字换行显示文字颜色end
                           },
                   type : 'category',
                   data: ["饭店供应商数量","酒店供应商数量","合作大巴公司数量","保险供应商数量","票务供应商数量"]
                  },
            yAxis: {//Y轴上的内容
                  type : 'value'
                   },
            series: [
                //第一条数据 begin
                   {
                   type: 'bar',//Echart 柱状图（bar）
                   name:'累积',
                   data: [610, 700, 400, 600, 500],
                       //柱状条颜色的设置为#eb6768 begin
                       itemStyle: {
                               normal: {
                               color: '#eb6768',
                               shadowBlur: 2,
                               shadowColor: 'rgba(3, 3, 4, 0.5)'
                                       }
                                   }
                       //柱状条颜色的设置为#eb6768 end
                   },
               //第一条数据 end

               //第二条数据 begin
                   {
                   type: 'bar',
                   name:'新增',
                   data: [510, 400, 300, 200, 100],
                   //柱状条颜色的设置为#eb6768 begin
                   itemStyle: {
                           normal: {
                               color: '#3b8ede',
                               shadowBlur: 2,
                               shadowColor: 'rgba(3, 3, 4, 0.5)'
                                  }
                               }
                   //柱状条颜色的设置为#eb6768 end
                  }
               //第二条数据 end
               ]
           };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

实例2：折线图 Echart series 数组显示方式

源代码

<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    
     <script src="echarts.min.js"></script>
</header>
<body>
    
    <div id="main" style="width:100%;height:250px;"></div>
   <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {

            tooltip: {},
            legend: {//说明
               orient: 'vertical',
                left: 'left ',//位置再左边显示
                data:['使用空间','空闲中设备']//数据名称
            },
            xAxis: {
               //设置字体颜色的默认文字横着显示begin
               axisLabel:{
               textStyle:{
                       color:"#636363"
                   }
               },
               //设置字体颜色的默认文字横着显示 end
                data: ['2016.05.19','2016.05.18','2016.05.17','2016.05.16','2016.05.15','2016.05.14','2016.05.19']//数据名称是时间
            },
            yAxis: {},
           series: [

//第一条数据 begin

            {
               name:'使用空间',
               type:'line',
               stack: '总量',
               data:[120, 132, 101, 134, 90, 230, 210],
               //设置线条颜色 begin
               itemStyle: {
                       normal: {
                           color: '#68E063',
                           shadowBlur: 2,
                           shadowColor: 'rgba(3, 3, 4, 0.5)'
                       }
                   }
               //设置线条颜色 end
           },
           //第一条数据 end

           //第二条数据 begin
           {
               name:'空闲中设备',
               type:'line',//Echart 数据为折线图 line
               stack: '总量',
               data:[220, 182, 191, 234, 290, 330, 310],
               //设置线条颜色 begin
               itemStyle: {
                       normal: {
                           color: '#f0b24b',
                           shadowBlur: 2,
                           shadowColor: 'rgba(3, 3, 4, 0.5)'
                       }
                   }
               //设置线条颜色 end
           }

      //第二条数据 end
       ]

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

实例3：饼图 Echart series数组

源代码

<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    
    <script src="echarts.min.js"></script>
</header>
<body>
    
    <div id="main" style="width: 800px;height:600px;"></div>
   <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {


           series : [
               {

                   type: 'pie',
                   radius: '55%',
                   data:[
                      /*   355, 290, 340*/

                       {value:310, name:'邮件营销'},
                       {value:445, name:'直接访问'},
                       {value:400, name:'搜索引擎'}

                   ],
                   roseType: 'angle',
                   label: {
                       normal: {
                           textStyle: {
                               /* color: 'rgba(182, 182, 176)'*/
                           }
                       }
                   },
                   itemStyle: {
                       normal: {
                           color: '#4AB6B0',
                           shadowBlur: 2,
                           shadowColor: 'rgba(3, 3, 4, 0.5)'
                       }
                   }

               }
           ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。