精华内容
下载资源
问答
  • legend:图例 legend: { icon: 'roundRect',// 图例的形状,带圆角的矩形(roundRect) itemWidth: 15,// 单个icon的width(单位px) itemHeight: 10,// 单个icon的height(单位px) itemGap: 25,// 每个...

    ①legend:图例

    legend: {
        icon: 'roundRect',// 图例的形状,带圆角的矩形(roundRect)
        itemWidth: 15,// 单个icon的width(单位px)
        itemHeight: 10,// 单个icon的height(单位px)
        itemGap: 25,// 每个icon之间的距离(单位px)
        barBorderRadius: 5,// icon的圆角(单位px)
        top: 33,// 整个图例的top
        right: 10,// 整个图例的right
        data: ['早餐(份)', '中餐(份)','晚餐(份)','就餐人数(人)'],
        textStyle: {// 图例的文字颜色,color为一个值时所有的文字颜色相同
            color: ["#FFC365",'#7FC5FF','#D12053','#3AC47E']
        }
    }

    ②,③yAxis:Y轴,在yAxis数组中写多个集合则有多个Y轴

    一个Y轴时,在左侧(不需要特别标注)

    两个Y轴时,左右侧各一个(不需要特别标注)

    >2个Y轴时,通过配置 offset 属性防止同个位置多个 Y 轴的重叠

    yAxis: [
        {
            type: 'value',// 坐标轴类型,数值轴(value),适用于连续数据
            nameTextStyle: {// 坐标轴名称的文字样式
                color: '#64A7DF'
                // 关于该坐标轴的color,fontSize,fontWeight等都在这里设置
            },
            axisLine: {// 坐标轴轴线相关设置
                lineStyle: { //轴线样式写在这个下面
                    color: '#64A7DF'
                }
            },
            splitLine: {// 分隔线
                show: true,
                lineStyle: {
                    color: '#22376d'
                },
            },
        },// 第一个Y轴(左侧)
        {
            type: 'value',
            axisLabel: {// 刻度标签
                formatter: '{value}'
            },
            nameTextStyle: {
                color: '#64A7DF'
            },
            axisLine: {
                lineStyle: {
                    color: '#64A7DF'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#22376d'
                },
            },
        }// 第二个Y轴(右侧)
    ],

    ④splitLine:分隔线,可以写在yAxis(Y轴)、xAxis(X轴)的数组中

    写在yAxis(Y轴)里是横向的,形如 ‘三’

    写在xAxis(X轴)里是纵向的,形如 ‘川’

    yAxis: [
        {
            splitLine: { // ‘三’形分隔线
                show: true,
                lineStyle: {
                    color: '#22376d'
                },
            }
        }
    ]

    ⑤xAxis:X轴

    xAxis: [
        {
            type: 'category',// 类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 xAxis.data 设置类目数据。
            data: [...this.leftMiddleResult.nDate],// this.leftMiddleResult.nDate为日期的数组
            axisTick: {// 坐标轴刻度相关设置
                show: false //X轴默认是显示的
            },
            nameTextStyle: {// 坐标轴名称的文字样式
                color: '#64A7DF'
            },
            axisLine: {// 坐标轴轴线相关设置
                lineStyle: {
                    color: '#64A7DF'
                }
            }
        }
    ],

     ⑥series.type = 'bar':柱状图(条形图)

    series: [
        {
            name: '早餐(份)',//这个name要跟legend里的data统一
            type: 'bar',
            data: [
                this.leftMiddleResult.list[0].nBreakfast,
                this.leftMiddleResult.list[1].nBreakfast,
                this.leftMiddleResult.list[2].nBreakfast,
                this.leftMiddleResult.list[3].nBreakfast
            ],
            itemStyle: {    // 小柱子的样式
                color: '#FFC365',
                borderRadius : [18, 18, 0 ,0]
            }
        },
        {
            name: '中餐(份)',
            type: 'bar',
            data: [
                this.leftMiddleResult.list[0].nLunch,
                this.leftMiddleResult.list[1].nLunch,
                this.leftMiddleResult.list[2].nLunch,
                this.leftMiddleResult.list[3].nLunch
            ],
            itemStyle: {    // 小柱子的样式
                color: '#7FC5FF',
                borderRadius : [18, 18, 0 ,0]
            },
        },
        {
            name: '晚餐(份)',
            type: 'bar',
            data: [
                this.leftMiddleResult.list[0].nDinner,
                this.leftMiddleResult.list[1].nDinner,
                this.leftMiddleResult.list[2].nDinner,
                this.leftMiddleResult.list[3].nDinner
            ],
            itemStyle: {    // 小柱子的样式
                color: '#D12053',
                borderRadius : [18, 18, 0 ,0]
            },
        },
        {
            name: '就餐人数(人)',
            type: 'bar',
            data: [
                this.leftMiddleResult.list[0].nEatPeople,
                this.leftMiddleResult.list[1].nEatPeople,
                this.leftMiddleResult.list[2].nEatPeople,
                this.leftMiddleResult.list[3].nEatPeople
            ],
            yAxisIndex: 1,// 使用的 y 轴的 index,也就是说这个bar对应的是第二条Y轴(右侧Y轴)上的高度
            itemStyle: {    // 小柱子的样式
                color: '#3AC47E',
                borderRadius : [18, 18, 0 ,0]
            },
            barCategoryGap: '40%',  // 每一组小柱子的间距(默认为类目间距的20%),设置在最后一个这里起到了全局效果
        }
    ]

     

    展开全文
  • echart柱状图绘制

    2019-09-27 11:36:08
    echart图绘制的时候html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta ...

    在echart图绘制的时候html

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="layui/js/echarts.js"></script>
    <!-- <script type="text/javascript" src="../../../assets/echarts.js"></script> -->
    </head>
    <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="border:1px solid red;width:900px;height:600px;margin-left:18%;"></div>
    <div id="main1" style="border:1px solid red;width:900px;height:600px;margin-left:18%;"></div>
    
    <script type="text/javascript">
     
    //先加载后台数据 对获取的数据进行分组 且写入对应位置的数组中
    var mycars=new Array('日', '一', '二', '三', '四', '五', '六');//string型数组
    var mycarstow=new Array(10, 940, 908, 940, 1300, 1350, 1450);//int型数组
     
     
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var mychart1 = echarts.init(document.getElementById('main1'));
    //折线统计图
    optionone = {
        xAxis: {
            type: 'category',
          //data: ['日', '一', '二', '三', '四', '五', '六']   //这个是原来的
            data: mycars
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            //data: [810, 940, 908, 940, 1300, 1350, 1450], //这个是原来的
            data: mycarstow,
            type: 'line',
            smooth: true
        }]
    };
     
    //病状统计图
    optiontow = {
        title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:100, 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)'
                    }
                }
            }
        ]
    };
    
    option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                ['product', '2015', '2016', '2017'],
                ['Matcha Latte', 43.3, 85.8, 93.7],
                ['Milk Tea', 83.1, 73.4, 55.1],
                ['Cheese Cocoa', 86.4, 65.2, 82.5],
                ['Walnut Brownie', 72.4, 53.9, 39.1]
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
        ]
    };
     
     
    // 使用刚指定 optiontow 的配置项和数据显示图表。 optiontow是上面定义的样式 ,这个样式网站在下面
    myChart.setOption(optiontow);
    mychart1.setOption(option);
    </script>
    </body>
    </html>
    

    图片:引用
    在这里插入图片描述
    地址:
    查看地址
    echarts.js下载:
    链接: https://pan.baidu.com/s/1NyAYXxnYst2Qvh7SIh7PgQ 提取码: zgrh 复制这段内容后打开百度网盘手机App,操作更方便哦

    展开全文
  • 今天写柱状图,想记录一下。 1.改变柱状图主子宽度,柱子颜色。 2.y轴隐藏轴线和刻度线。 3.X轴的轴线和刻度线样式修改。 4X轴刻度在中间还是在左右两边。 在这里插入代码片var option = { color: ["#1890FF"], ...

    今天写柱状图,想记录一下。
    1.改变柱状图主子宽度,柱子颜色。
    2.y轴隐藏轴线和刻度线。
    3.X轴的轴线和刻度线样式修改。
    4X轴刻度在中间还是在左右两边。

    在这里插入代码片var option = {
        color: ["#1890FF"],
    
        borderColor: "#eee",
        title: {
          text: "成绩单",
          left: "left",
          textStyle: {
         
            fontSize: 14,
            
          }
        },
        // 提示框设置
        tooltip: {
          trigger: "axis",
          backgroundColor: "#ffff",
          padding: 10,
          borderWidth: 1,
    
          textStyle: { color: "#000" },
    
          formatter: function(params) {     //设置鼠标滑动到柱子中的显示的提示框
            var str =
              "<span style='color:#000000'>" +
              params[0].name +
              "<br /><span style='color:red'>" +
              params[0].data +
              "</span>个</span>";
            return str;
          }
        },
        legend: {      //设置图例
          data: ["成绩"],
          x: "1000px",
          y: "20px"
        },
        xAxis: [
          {
            axisLine: {
              show: false, //是否显示坐标轴轴线
              lineStyle: { border: "1px solid #E8E8E8" }
            },
            type: "category",
            axisTick: {
              alignWithLabel: true,//是否显示x轴刻度线
              lineStyle: {  //x轴刻度线样式
                color: "#E8E8E8"
              }
            },
            // boundaryGap: true,
            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月",]
          }
        ],
        yAxis: [
          {
            axisLine: {
              show: false //是否显示坐标轴轴线
            },
            axisTick: {
              show: false,//去掉y轴刻度线
            },
            splitLine: {                 //坐标轴在 grid 区域中的分隔线。
              show: true,              //是否显示分隔线。默认数值轴显示,类目轴不显示。
              interval: "auto",        //坐标轴分隔线的显示间隔,在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1,表示『隔一个标签显示一个标签』,可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
              lineStyle: {
                border: "1px dashed #E8E8E8"
              },
    
            },
            offset: 0, // 偏移距离
            type: "value",
            min: 0, // 设置y轴刻度的最小值
            max: 800, // 设置y轴刻度的最大值
            splitNumber: 4, // 设置y轴刻度间隔个数
            nameTextStyle: {   //y轴显示名字样式
              fontSize: "12px",
              
            }
          }
        ],
        series: [
          {
            showSymbol: false, // 让圆点默认不显示,移入显示
            symbolSize: 5, // 设置折线上圆点大小
            type: "bar",
            name: "环比率",
            // itemStyle: {
            //   normal: {}
            // },
            barWidth: "24px",//柱子宽度
            smooth: true, //设置折线为圆滑曲线,false则有转折点
            itemStyle: {//柱子样式
              normal: {
                color: "#1890FF",
                opacity: 0.85,
               
                lineStyle: {
                  
                },
                label: { show: false, position: "top" } //柱状图上面是否显示数值
              }
    
            },
            data: [123, 344, 455,123, 344, 455,123, 344, 455,455] // 参数
          }
        ]
      };
    
    展开全文
  • //点击图例默认是把柱状图隐藏了,此段代码就是为了点击图例展示柱状图 myChart.on('legendselectchanged', function (params) { let option = this.getOption(); let select_key = Object.keys(params.selected...
     let myChart = this.$echarts.init(document.getElementById('myChart'));
                let option = {
                    color: ['#FFCD86'],//柱子颜色
                    backgroundColor: ['#fff'],//背景色
                    title: {
                        text: ''
                    },
                    tooltip: {},
                    legend: {
                        data: ['总订单量'],
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['10.1-10.7', '10.7-10.14', '10.14-10.21', '10.21-10.28', '10.28-11.5', '11.5-11.12', '11.12-11.19', '11.19-11.26'],
                        axisLabel: {
                            interval: 0,//横轴信息全部显示  
                            // rotate: -5,//-15度角倾斜显示  
                        },
                    }],
                    yAxis: {
                    },
                    series: [{
                        name: '总订单量',
                        type: 'bar',
                        data: [50, 120, 180, 80, 200, 110, 130, 50],
                        barWidth: 30,//柱图宽度
                    }]
                };
                myChart.setOption(option);// 使用刚指定的配置项和数据显示图表。
                //点击图例默认是把柱状图隐藏了,此段代码就是为了点击图例展示柱状图
                myChart.on('legendselectchanged', function (params) {
                    let option = this.getOption();
                    let select_key = Object.keys(params.selected);
                    if (!params.selected[params.name]) {
                        select_key.map(res => {
                            option.legend[0].selected[res] = !params.selected[res];
                        });
                    } else {
                        select_key.map(res => {
                            option.legend[0].selected[res] = false;
                        });
                        option.legend[0].selected[params.name] = true;
                    }
                    this.setOption(option);
                });

     

    展开全文
  • echart柱状图和折线图混合

    千次阅读 2018-09-03 09:01:55
    来自博主:https://www.cnblogs.com/zjf-1992/p/6371765.html Echarts 官网主页 http://echarts.baidu.com/index.html Echarts 更多项目案例 ... Echart参数设置 http://echarts.b...
  • 本文主要记录一下使用echart柱状图堆叠时,需要在柱状图顶部显示总计数值的问题。参考一篇文章的实现,它的实现方式是替换最后一列的formater属性来达到实现总计的方式。我的实现方式是使用再堆叠一个柱状图的形式...
  • Echart显示具体需要的js包见 - - 我的上一篇文章 <script src="js/echarts.min.js"></script> <div class="row" style="padding-top: 15px;"> <div id="main" style="width: 100%;height:400...
  • <template> <div> <div id="leftBottom" style="width:6.75rem;height:3.375rem;"></div> </div> </template> <script> const echarts = require(... mounted(...
  • option = { "calculable": true, "color": ["#c23531", "#ca8622", "#91c7ae", "#546570", "#f00000" ], "legend": { "data": ["大(1)型", "大(2)型", "中型", "小(1)型", "小(2)型"] }, "series": [{ "data":...
  • echart柱状百分比

    2020-08-29 10:50:43
    echarts百分比横向柱状图样式要求一、样式二、使用步骤1.引入库2.html总结 要求 一个横向的百分比柱状图 一、样式 就这么一个样式,所占百分比被我隐藏了 二、使用步骤 1.引入库 代码如下(这里用了bootstracp等...
  • echarts柱状图图例不显示的问题

    万次阅读 多人点赞 2018-06-20 15:00:31
    要达到的效果如: 废话不多说,直接上代码: 如果想要图例有效果,legend中数据要和series中name的值保持一致,切记切记,这是我曾经遇到的坑,不保持一致是没有效果的...
  • barGap: '-100%', series: [ {//百分比 name: legendData[0], type: "bar", barWidth: 20, label: { show: true, //开启显示 position: ['1%',
  • Vue中使用Echart图标插件之柱状图

    千次阅读 2019-09-26 17:38:24
    Echart是一个很好的图表绘制插件,里面有各种各样的图表供我们选择,最近用echart做图表比较多,所以现在记录一下用到的柱状图用到的一些配置和用法, 主要注意的点: 创建的画布必须给定大小,不然无法显示 ...
  • 需求需要,第一次使用echart,记录一下,先看一下最终效果直接看代码及注释吧。html&lt;div id="x_count_echart"&gt; &lt;/div&gt;css#x_count_echart{  height: 460px;  width: 500...
  • echart.js柱状图

    千次阅读 2019-02-16 10:33:18
    legend: { //除去label display: false, }, scales: { yAxes: [{ ticks: { //y从零开始 beginAtZero: true } }] }, //显示具体数值 "animation": { ...
  • 分享自己公司项目类似的一个案例,用Echarts中的Polar(极坐标或称为平面直角坐标系)和Bar(柱状图)实现的 源码:https://gitee.com/DieHunter/myCode/tree/master/Echart/AppleWatch
  • echart叠加柱状图上显示文字

    千次阅读 2020-10-17 16:24:37
    echart叠加柱状图上显示文字效果图修改代码源代码欢迎使用Markdown编辑器功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格...
  • echarts图表设置legend样式

    千次阅读 2020-04-01 11:15:09
    legend : [ { data : [ '名字' ], orient : 'horizontal', //设置水平展示 bottom : 'bottom', //设置底部展示 itemHeight : 20, //legend图形大小 x : '200px', //自定义位置 y : '280px',...
  • echarts柱状图legend分2行排列

    千次阅读 2020-07-02 11:52:06
    /* * 讲legend分成2个,然后排列方式变成水平排列,最后使用 * bottom来讲将 2着区分开 */ legend:[{ orient: 'horizontal', itemWidth: 10, itemHeight: 10, left:'2%', bo
  • 1.legend名字与series名字一样,即可联动,且不可手动去掉联动效果 2.通过legend图例联动,隐藏绘制图线后,对应( yAxisIndex: 1)坐标y轴如果没有同时设置min和max的情况下,会自动隐藏。 3.grid可以通过设置x、...
  • vue 中 EChart 的使用,简单实例 1、npm 安装 ECharts 命令: npm install echarts --save 2、引入 ECharts 在 main.js 中通过 import echarts from "echarts"; Vue.prototype.$echarts = echarts; 3、定义盒子...
  • 团队名作为legend,日期作为x轴,销量y轴 数据为: datas:[{ date:"2019-10-01", groupdata:[{groupname:"团队1",price:"1000.0"}, groupname:"团队2",price:"2000.0"}] }] series的属性要以legend的...
  • { name: "受理件", data: this.suqiuList, type: "bar", barWidth: 13, //柱宽度 itemStyle: { normal: { //柱形圆角,初始化效果 barBorderRadius: [15, 15, 0, 0], }, }, // barGap:'0%' }, { name: "近七日...
  • Echart柱状图和饼状图

    2021-01-14 17:12:01
    } function init_pie(){ var option = { tooltip: { trigger: 'item', formatter: '{a} {b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['直达','营销', '搜索', '邮件','联盟','视频']...
  • 效果如下: var option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' ...
  • let option = { grid: { left: 0, right: 12, bottom: 0, ... legend: { top: 32, left: -5, icon: "circle", // 修改形状 itemHeight: 6, // 修改icon图形大小 itemGap: 24, // 修改间距 textSty
  • echarts设置柱状图柱状图粗细大小

    万次阅读 2019-09-09 15:22:07
     //设置柱状图大小 barWidth: 20, demo: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>柱状图大小</title> <!-- 引入 echarts.js --> ...
  • 此篇博客内容主要是本人实际工作经验。话不多说,直接附上具体实现 因js原太长,所以直接附上js源码

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,996
精华内容 1,198
关键字:

echart柱状图legend