echarts之柱状图(bar)、饼状图(pie)

最新推荐文章于 2024-05-20 16:36:03 发布
最新推荐文章于 2024-05-20 16:36:03 发布
阅读量4.6k 收藏 1
点赞数
分类专栏： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangchaohpu/article/details/81780135
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echartsLineTest</title>

    <script src="../../libs/jquery/jquery.js"></script>
    <script src="../../widgets/dnQuery/lib/echarts/dist/echarts-all.js"></script>

</head>
<body>

    <div id="staChart" style="width:550px;height:320px;"></div>

<script>

    var chart;
    $(function() {
        setChart()
    })

    function setChart() {
        chart = echarts.init(document.getElementById("staChart"));
        chart.setOption(getChartOption("bar"));

    }
    function getChartOption(type) {


        var yField = "地块面积/公顷";//y坐标字段名称
        var xField = "地块名称";//y坐标字段名称
        var title = "2016年土地利用现状统计";//标题
        var subTitle = "地块面积统计";//副标题

        //自定义切换按钮
        var myToolTitle = "";
        var myToolImage = "";
        if (type === 'bar') {
            myToolTitle = "饼图切换";
            myToolImage = 'image://../images/iconPie.png';
        } else if (type === 'pie') {
            myToolTitle = "直方图切换";
            myToolImage = 'image://../images/iconBar.png';
        }


        //option
        var option = {};

        if (type == 'bar') {

            var dataZoomEndPercent = 1200/3;

            var xdata = ["耕地","林地"];
            var staSeries = {
                name: "地块面积",
                type: 'bar', //line
                itemStyle: { normal: { label: { show: true, position: 'top' } } },
                data: [100,200],
                barWidth: 25
            };


            option = {
                color: ['#3398DB'],
                title: {
                    x: 'center',
                    text: title,
                    subtext: subTitle
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    show : true,
                    orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
                                               // 'horizontal' ¦ 'vertical'
                    x: 'right',                // 水平安放位置，默认为全图右对齐，可选为：
                                               // 'center' ¦ 'left' ¦ 'right'
                                               // ¦ {number}（x坐标，单位px）
                    y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
                                               // 'top' ¦ 'bottom' ¦ 'center'
                                               // ¦ {number}（y坐标，单位px）
                    color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
                    backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
                    borderColor: '#ccc',       // 工具箱边框颜色
                    borderWidth: 0,            // 工具箱边框线宽，单位px，默认为0（无边框）
                   padding: 5,                // 工具箱内边距，单位px，默认各方向内边距为5，
                    showTitle: true,
                   
                    feature: {
                        //mark: { show: true },
                        //dataView: { show: true, readOnly: false },
                        magicType: {
                             show : true,
                             title : {
                                 line : '折线图',
                                 bar : '柱形图',
                    
                              },
                              type : ['line', 'bar']
                         },
                        //restore: { show: true },
                        myTool: {
                            show: true,
                            title: myToolTitle,
                            icon: myToolImage,
                            onclick: function (option1) {
                                chart = echarts.init(document.getElementById("staChart"));
                                chart.setOption(getChartOption('pie'));
                            }
                        },
                        saveAsImage: { show: true }
                      
                    }
                },
                calculate: true,
                grid: {
                    left: '0px',
                    right: '0px',
                    bottom: '10px',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        name:xField,
                        data: xdata,
                        axisLabel: {
                            interval: 0,
                            rotate: 20
                        }
                        //axisTick: {
                        //    alignWithLabel: true
                        //}
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: yField,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                dataZoom : {
                    show : false,
                    realtime : true,
                    start : 0,
                    end : dataZoomEndPercent,
                    zoomLock: true
                },
                series: [
                    staSeries
                ]
            };


        } else if (type == "pie") {
            option = {
                title: {
                    text: title,
                    subtext: subTitle,
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    show: true,
                    orient: 'vertical',
                    selectedMode:false,//取消图例上的点击事件
                    x: '10px',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                    {
                        name: yField,
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data:
                           [
                           { value: 335, name: '直接访问' },
                           { value: 310, name: '邮件营销' },
                           { value: 234, name: '联盟广告' },
                           { value: 135, name: '视频广告' },
                           { value: 1548, name: '搜索引擎' }
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ],
                toolbox: {
                    show: true,
                    feature: {
                        myTool: {
                            show: true,
                            title: myToolTitle,
                            icon: myToolImage,
                            onclick: function (option1) {
                                chart = echarts.init(document.getElementById("staChart"));
                                chart.setOption(getChartOption('bar'));
                            }
                        },
                        saveAsImage: { show: true }
                    }
                }
            };

        }
        return option;
    }

</script>
</body>
</html>

echsrts引用的相关js文件：链接：https://pan.baidu.com/s/1GP34oLNd-EEjqWXHZ9sYeA 密码：se9t

相关参考：http://echarts.baidu.com/echarts2/doc/example/toolbox.html 

一名写前端的GISer
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echart 动画 饼图_Echarts学习之四：series-pie饼图
weixin_33204286的博客
12-23 941
mytextStyle={color:"#333", //文字颜色fontStyle:"normal", //italic斜体 oblique倾斜fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400...fontFamily:"sans-serif", ...
Echarts 浅谈饼图
weixin_44391520的博客
04-26 728
Echarts浅谈饼图/环形图(pie)使用 从事前端开发已有一段时间了，由于各种原因，一直都没有形成自己的总结文档，第一次写，不足的请各位高手指导。 本文总结Echarts对饼图的使用 一、准备工作 // 第一步：设置一个标签来放置饼图，必须设置宽高； <div id="main" style="width: 100%;height: 280px;"></div> //...
可视化图表（ECharts、orgchart）
sinat_38011533的博客
08-10 1240
一、ECharts 官网：https://echarts.apache.org/examples/zh/index.html 常用的饼图、柱状图、关系图 html中js文件引入: <link type="text/javascript" src="../eCharts-4/eCharts4.js" /> <link type="text/javascript" src="../OrgChart-master/jquery.orgchart.css" /> <!
echart柱状图的柱子宽度过宽，设置barWidth
最新发布
weixin_46886988的博客
05-20 298
柱子过宽
vue2中echarts饼图和柱状图联动，点击饼图扇区带出柱状图数据的实现，以及需要注意的点
m0_73571867的博客
09-15 1478
let that = this //改变this指向 直接使用this 会定位到echart 不是vue (指向问题很关键，开始我就踩坑了)// 扇区点击事件 联动柱形图（这个点击事件就是点击扇区 然后把对应的值赋值给柱状图啦）that.zhuInit() //改变指向后才能调用方法 否则会报错未定义。color: colorspie // 使用相同的颜色配置。//或者改成箭头函数 this指向也可改变 （param）=>{}// 选中legend 触发点击事件。// 随着屏幕大小调整图表。
Echarts 自定义工具栏事件 || 柱状图和饼状图之间的切换
小雨
11-27 5466
echarts中有柱状图和折线图之间的切换,却没有柱状图和饼图直接的切换 不过echarts有自定义工具栏方法,我们可以通过自定工具栏的方法来实现echarts没有的图形切换 toolbox 中的 feature 自定方法 (title: 鼠标放上去显示的文字;icon: 自定工具栏的图标的path路径;onclick: 点击事件) 在点击事件写自己要处理成的图形代码就行了, 下面有我的一个完整实例 如何引入echarts,在我的上一篇文章中, 完整代码: <template> &lt.
ECharts入门
qq_45835940的博客
01-03 3167
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="...
echarts柱状图
11-11
**ECharts柱状图详解** ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、饼图等，能够满足各种数据分析和展示的需求。在本篇中，我们将深入探讨ECharts中的柱状图...
Web统计图表插件_ECharts_饼状图_柱状图_折线图
07-06
在ECharts中，饼状图可以通过设置`series-type`为`pie`来创建。你可以自定义各个扇区的颜色、大小、标签、提示框等，同时支持内嵌饼图和环状图，通过`innerRadius`属性可以调整内径，实现更复杂的数据展示效果。 2....
柱状图及饼状图demo
11-24
在Echarts中，饼状图的配置与柱状图类似，只是`type`属性设置为'pie'。`label`和`labelLine`配置可以用来设置饼图上的文字标签及其连接线，`emphasis`用于高亮选中状态的样式。`data`数组中的每个元素包含名称和对应...
ECharts 3 饼图 柱状图
05-17
在 ECharts 3.19 版本中，我们重点讨论的是饼图和柱状图的使用方法，以及如何结合 AJAX 和 JSON 数据来实现动态、炫酷的数据展示效果。 首先，饼图是用于显示整体与部分之间关系的一种图表，每个扇形代表整体中的一...
echarts图标和地图demo
06-12
ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、饼状图以及地图等，适用于各种Web项目的数据展示。在这个“echarts图标和地图demo”中，我们主要会探讨以下几个核心...
echarts图表切换功能（不改变数据，只切换图形）
min的博客
05-26 8930
方法一：echarts自带（该方法能进行折线图和柱状图的切换，因为这两种图表渲染的数据格式是一致的） // 在options中加入以下配置即可 toolbox: { show: true, feature: { magicType: {type: ['line', 'bar']}//此处最新版本echarts可设置三个值（stack-堆叠模式） } } 方法二：自己进行数据处理，并重新渲染echarts（自己实操，想法
前端echarts插件制作柱状图、饼状图、折线图
温柔雨哥的博客
12-22 2314
1、饼状图 打开网址：https://www.echartsjs.com/zh/index.html 点开实例，找到饼状图，有许多小例子，点进去一个，会有相应饼状图代码，复制到自己文件里，引入插件即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> ...
echarts生成饼状图、柱状图、多项柱状图的参数介绍
nb7474的博客
03-16 2443
1.饼图html代码：<div id="SexDistri" style="width: 100%;height: 50%;"></div>下面的柱状图的html代码也与此类似。js代码：var SexDistribution = ${SexDistribution}; //console.log(SexDistribution); var res =[]; var tot
echarts 柱状图 bar、饼状图 pie 设置不同颜色，如何实现
11-18 1万+
echart 柱状图 bar 设置不同颜色，如何实现 echarts 配置柱状图，不同数据颜色不一，如何实现 实现 主要是 series 中的 itemStyle 属性。 itemStyle: { normal:{ color: function(params){ return colors[params.dataIndex]; // 取每条数据的 index 对应 colors 中的 index 返回这个颜色 }
三、Echarts使用柱状图、饼图
weixin_42317685的博客
07-16 732
Echarts使用柱状图、饼图
echarts饼状图的使用
weixin_52703987的博客
05-19 1万+
echarts饼状图的使用 地址：https://echarts.apache.org/zh/index.html 第一步： 通过 npm 获取 echarts， npm install echarts --save 引用方式（两种） 全局引入 main.js中配置 import echarts from ‘echarts’ //引入echarts Vue.prototype.$echarts = echarts //引入组件 vue中echarts引用 先创建一个盒子 <div id
ECharts配置简单说明
热门推荐
danielinbiti的专栏
03-23 4万+
这里所使用的版本是 version = '2.2.0'; dependencies = { zrender: '2.0.7' }; 1、下载ECharts源码，如果不知道哪下载，百度一下ECharts，然后就能看到官网了。 2、下载后，可以看到build文件夹，如果不是为了调测，可以直接使用dist文件夹下的。echarts.js和echarts-all.js区别在于后者已经把
echarts 饼图柱状图切换
10-11
您可以使用 echarts 提供的图例组件和切换组件来实现饼图和柱状图的切换。具体操作如下： 1. 在 option 中设置 legend，包含饼图和柱状图的名称。 2. 在 option 中设置 series，分别对应饼图和柱状图的数据。 3. 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值