精华内容
下载资源
问答
  • /* * 讲legend分成2个,然后排列方式变成水平排列,最后使用 * bottom来讲将 2着区分开 */ legend:[{ orient: 'horizontal', itemWidth: 10, itemHeight: 10, left:'2%', bo
    /*
    * 讲legend分成2个,然后排列方式变成水平排列,最后使用
    * bottom来将 2者区分开
    */
    
    
      legend:[{
                            orient: 'horizontal',
                            itemWidth: 10,
                            itemHeight: 10,
                            left:'2%',
                            bottom:'10%',
                            data: ['一次电话随访', '二次电话随访']  
                            },
                            {
                                orient: 'horizontal',//水平排列。(vertical为垂直排列}
                                itemWidth: 10,
                                itemHeight:10,
                                left:'2%',
                                bottom:'bottom',
                                data: ['三次电话随访', '四次及以上']
                            },
                        ],
    

    实现效果:
    在这里插入图片描述

    展开全文
  • // 柱状图设置 chart .interval() .label("num", { offset: -10 }) .size(36) .position('name*num') .tooltip('num*score', (num, score) => { return { num, score } }) .color("city") // 折线图设置 隐藏...

    在这里插入图片描述

    自定义图例: 这个可能实现的思路不太对, 目前是在数据列表里新建了个无用字段,在坐标轴隐藏该字段,通过color触发图例,再通过legend自定义内容
    找这些东西太难了,找半天找不到,不用color的情况下我用legend无效

    import React, { useState, useEffect, useRef} from "react";
    import "./chart.less"
    import { Chart } from "@antv/g2";
    
    const Charts = () => {
    
        const chartRef = useRef()
        const data = [
            { name: "杭州银行", score: 2, num: 5, city: "bj" },
            { name: "南京银行", score: 4, num: 11, city: "bj" },
            { name: "江西邮储", score: 8, num: 13, city: "bj" },
            { name: "农业银行", score: 5, num: 9, city: "bj" },
            { name: "工商银行", score: 9, num: 6, city: "bj" },
            { name: "人民银行", score: 3, num: 29, city: "bj" },
        ]
    
        const [chart, setChart] = useState(null)
    
        useEffect(() => {
            if (data && !chart) {
                const c = new Chart({
                    container: 'c7',
                    autoFit: true,
                    width: 500,
                    height: 300,
                });
                setChart(c)
            }
        }, [data])
    
        useEffect(() => {
            chart && renderChart()
        }, [chart, data])
    
        const renderChart = () => {
            const nums = data.map(i => i.num)
            const maxValue = Math.max(...nums)
            const max = Math.ceil(maxValue / 10) * 10
            const margin = 1 / 5
    
            chart.clear()
            chart.data(data);
    
            chart.scale('score', { // 右侧坐标轴
                min: 0,
                max: 10,
                tickCount: 6, // 左右坐标轴刻度数量保持一致 好看点
                range: [0, 1 - margin / 2],
            })
    
            const tick = max / 5
            let ticks = new Array(6).fill(null)
            ticks = ticks.map((i, t) => t * tick)
            chart.scale('num', { // 左侧坐标轴
                min: 0,
                max: max,
                ticks: ticks,
                tickCount: 6,
                range: [0, 1 - margin / 2],
            })
    
            chart.scale('city', { // 无用坐标轴
                min: 0,
                max: max,
                ticks: ticks,
                tickCount: 6,
                range: [0, 1 - margin / 2],
            })
    
            chart.scale('name', {
                nice: true,
            })
    
            chart.axis("city", { // 隐藏无用坐标轴内容
                label: {
                    formatter: () => ""
                }
            })
    
            chart.axis("num", {
                title: {
                    text: "单位: 个",
                    autoRotate: false,
                    position: "end",
                    offset: -10,
                    textStyle: {
                        textAlign: 'start', // 文本对齐方向,可取值为: start middle end
                        fontSize: '12', // 文本大小
                        fontWeight: 'bold', // 文本粗细
                        textBaseline: 'top' // 文本基准线,可取 top middle bottom,默认为middle
                    },
                },
            })
    
            chart.axis("score", {
                title: {
                    text: "单位: 分",
                    autoRotate: false,
                    position: "end",
                    offset: -10,
                    textStyle: {
                        textAlign: 'start', // 文本对齐方向,可取值为: start middle end
                        fontSize: '12', // 文本大小
                        fontWeight: 'bold', // 文本粗细
                        textBaseline: 'top' // 文本基准线,可取 top middle bottom,默认为middle
                    },
                },
            })
    
            chart.axis("name", {
                label: {
                    autoRotate: true,
                    autoHide: false
                },
            })
    
            chart.interaction('active-region');
    		// 柱状图设置
            chart
                .interval()
                .label("num", {
                    offset: -10
                })
                .size(36)
                .position('name*num')
                .tooltip('num*score', (num, score) => {
                    return {
                        num,
                        score
                    }
                })
                .color("city")
    		// 折线图设置 隐藏无用的字段
            chart.
                line()
                .position('city')
                .style({
                    stroke: "transparent"
                })
            // 关闭图例点击事件 没找到api  没实现   点击图例可以触发这个方法
            // chart.on('legend:click', ev => {
            //     return false
            // });
            // 修改 自定义图例 增加 custom: true
            chart.legend({
    	      custom: true,
    	      position: "bottom",
    	      flipPage: false,
    	      items: [
    	        {
    	          name: "项目",
    	          marker: {
    	            symbol: "square",
    	            style:{
    	              fill: "#6395f9"
    	            },
    	            clickable: false
    	          },
    	        },
    	        {
    	          name: "评分",
    	          marker: {
    	            symbol: "circle",
    	            style:{
    	              fill: "#f59a23"
    	            },
    	            clickable: false
    	          },
    	        }
    	      ]
    	    })        
    
    		// tooltip的自定义内容
            const itemTpl = `
                <div class='chart7Tpl'>
                    <div class='tpl'>
                        <span class="tpl1">·</span>
                        评分:&nbsp;&nbsp;&nbsp;{score} 分
                    </div>
                    <div class='tpl'>
                        <span class="tpl2">·</span>
                        项目:&nbsp;&nbsp;&nbsp;{num} 个
                    </div>
                </div>
            `
    
            chart.tooltip({
                showTitle: true,
                showMarkers: false,
                itemTpl: itemTpl
            });
    		// 设置折线内容 颜色
            chart
                .line()
                .position('name*score')
                .size(4)
                .color("", () => "#f59a23")
                .tooltip('num*score', (num, score) => {
                    return {
                        num,
                        score
                    }
                })
       	    chart.removeInteraction('legend-filter'); // 自定义图例,移除默认的分类图例筛选交互
            chart.render();
        }
    
        return (
            <div className={"chart7"}>
                <div id="c7" ref={chartRef} />
            </div>
        )
    }
    
    export default Charts;
    
    
    展开全文
  • python画柱状图bar:并列柱状图

    千次阅读 2019-10-07 19:35:51
    1.alpha:柱状图形的透明度 2.width:柱形的宽度 3.edgecolor:图形的边缘颜色 4.label:图例,每个图像代表的含义 让图例展示出来的代码,并可指定其在图形中的位置 5.plt.legend("upper right") 方法一: ...

    参数:

    1.alpha:柱状图形的透明度

    2.width:柱形图的宽度

    3.edgecolor:图形的边缘颜色

    4.label:图例,每个图像代表的含义 让图例展示出来的代码,并可指定其在图形中的位置

    5.plt.legend("upper right")

    方法一:

    import numpy as np
    import pandas as pd
    import matplotlib.pyplot as plt
    from pandas import Series,DataFrame
    
    # 横坐标
    x=[1,2]
    # 第一个纵坐标
    y=[3,4]
    # 第二个纵坐标
    y1=[5,6]
    # fig和ax必须放在一起生成一个图
    fig,ax=plt.subplots()
    # 首先用第一个的长度作为横坐标
    x = np.arange(len(x)) +1
    # 设置柱与柱之间的宽度
    width=0.1
    ax.bar(x,y,width,alpha=0.9,label="one")
    ax.bar(x+width,y1,width,alpha=0.9,color="green",label="two")
    # 将坐标设置在指定位置
    ax.set_xticks(x+width/2)
    #将横坐标替换
    ax.set_xticklabels(x)
    plt.legend(loc="upper left")
    plt.show()
    

    方法二:

    import numpy as np
    from matplotlib import pyplot as plt
    plt.figure(figsize=(9,6))
    n = 8
    x = np.arange(n)+1 
    #X是1,2,3,4,5,6,7,8,柱的个数
    #uniform均匀分布的随机数,normal是正态分布的随机数,0.5-1均匀分布的数,一共有n个
    y1 = np.random.uniform(0.5,1.0,n)
    y2 = np.random.uniform(0.5,1.0,n)
    plt.bar(x, y1, alpha=0.9, width = 0.35,label='one')
    plt.bar(x+0.35, y2, alpha=0.9, width = 0.35,label='second', lw=1)
    plt.legend(loc="upper left")
    plt.show()

     

    展开全文
  • == '') { message += item.seriesName + ':' + item.data + ' ' } }) return message } }, legend: { show: true, right: '5%', top: '5%', orient: 'horizontal', icon: 'rect', itemWidth: 10, itemHeight: 10, ...

    在这里插入图片描述

    这个效果是三个柱子堆叠而成。

    data.nian = data.nian.map((item, index) => {
    	return `${item}年`
    })
    
    let chart = echarts.init(document.getElementById('school-building-chart'))
    let arr = []; let datas = []
    for (var i = 0; i < data.chuzhong.length; i++) {
    	arr.push(Number(data.chuzhong[i]) + Number(data.xiaoxue[i]))
    }
    // let max = Math.max(...arr)
    arr.forEach(function (item, index) {
    	datas.push({
    		value: item
    	})
    })
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器,坐标轴触发有效
          type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
        },
        formatter: function (params) {
          let message = ''
          params.forEach(function (item, index) {
            if (item.seriesName !== '') {
              message += item.seriesName + ':' + item.data + '<br>'
            }
          })
          return message
        }
      },
      legend: {
        show: true,
        right: '5%',
        top: '5%',
        orient: 'horizontal',
        icon: 'rect',
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          fontSize: 14,
          color: '#D1D1D1'
        }
      },
      grid: {
        top: '20%',
        left: '5%',
        right: '5%',
        bottom: '5%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        data: data.nian,
        axisLine: {
          lineStyle: {
            color: 'rgba(151,151,151,1)'
          },
          symbol: ['none', 'arrow'],
          symbolSize: [5, 10],
          symbolOffset: [10, 8]
        },
        axisLabel: {
          color: '#BEBEBE',
          fontSize: 12
        },
        axisTick: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        name: '所',
        nameLocation: 'end',
        splitLine: {
          show: false
        },
        axisTick: {
          show: false,
          length: 10,
          lineStyle: {
            color: '#8896b3'
          }
        },
        nameTextStyle: {
          color: '#53CABE',
          fontSize: 12
        },
        axisLabel: {
          color: '#BEBEBE',
          fontSize: 12
        },
        splitArea: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(151,151,151,1)'
          },
          symbol: ['none', 'arrow'],
          symbolSize: [5, 10],
          symbolOffset: [10, 8]
        }
      },
      series: [
        {
          name: '初中',
          type: 'bar',
          stack: '学校',
          itemStyle: {
            color: this.schoolBuildingColor[0]
          },
          barWidth: '15%',
          barGap: '50%',
          // 位置偏移
          barCategoryGap: '5%',
          data: data.chuzhong,
          z: 2
        },
        {
          name: '小学',
          type: 'bar',
          stack: '学校',
          itemStyle: {
            color: this.schoolBuildingColor[1]
          },
          barWidth: '15%',
          barGap: '50%',
          // 位置偏移
          barCategoryGap: '5%',
          data: data.xiaoxue,
          z: 2
        },
        {
          name: '',
          type: 'bar',
          barGap: '-100%',
          barWidth: '15%',
          z: 1,
          itemStyle: {
            color: 'transparent'
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#E6E6E6',
                fontSize: 14
              },
              formatter: '{c}'
            }
          },
          data: datas
        }
      ]
    }
    chart.setOption(option)
    // 处理legend点击事件
    chart.on('legendselectchanged', function (obj) {
      if (obj.name === '初中') {
        if (obj.selected['初中'] === false && obj.selected['小学'] === true) {
          option.series[2].data = data.xiaoxue
          option.series[1].data = data.xiaoxue
          option.series[0].data = []
          option.tooltip.show = true
          chart.setOption(option)
        } else if (obj.selected['初中'] === true && obj.selected['小学'] === false) {
          option.series[2].data = data.chuzhong
          option.series[1].data = []
          option.series[0].data = data.chuzhong
          option.tooltip.show = true
          chart.setOption(option)
        } else if (obj.selected['初中'] === false && obj.selected['小学'] === false) { // 如果“初中”和“小学”legend都没选中,则底层的柱数据不显示
          option.series[2].data = []
          option.series[1].data = []
          option.series[0].data = []
          option.tooltip.show = false // 没有数据不再显示toolTip
          chart.setOption(option)
        } else if (obj.selected['初中'] === true && obj.selected['小学'] === true) {
          option.series[2].data = datas
          option.series[1].data = data.xiaoxue
          option.series[0].data = data.chuzhong
          option.tooltip.show = true
          chart.setOption(option)
        }
      } else if (obj.name === '小学') {
        if (obj.selected['小学'] === false && obj.selected['初中'] === true) {
          option.series[2].data = data.chuzhong
          option.series[1].data = []
          option.series[0].data = data.chuzhong
          option.tooltip.show = true
          chart.setOption(option)
        } else if (obj.selected['小学'] === true && obj.selected['初中'] === false) {
          option.series[2].data = data.xiaoxue
          option.series[1].data = data.xiaoxue
          option.series[0].data = []
          option.tooltip.show = true
          chart.setOption(option)
        } else if (obj.selected['初中'] === false && obj.selected['小学'] === false) { // 如果“初中”和“小学”legend都没选中,则底层的柱数据不显示
          option.series[2].data = []
          option.series[1].data = []
          option.series[0].data = []
          option.tooltip.show = false // 没有数据不再显示toolTip
          chart.setOption(option)
        } else if (obj.selected['小学'] === true && obj.selected['初中'] === true) {
          option.series[2].data = datas
          option.series[1].data = data.chuzhong
          option.series[0].data = data.xiaoxue
          option.tooltip.show = true
          chart.setOption(option)
        }
      }
    })
    
    展开全文
  • 关于折线图的画法,请参考: ...如何画柱状图? 直接上代码: y = [197.9 163.8;220.45 166.95;319 265.7]; % y轴数据(柱状图高度),两个分号之间为一组数据 bar(y); % 画柱状图 Cell = {'10', '20', '40'}; s...
  • var cate = ['Green', 'Pink']; Highcharts.chart('container', { chart: { type: 'column' }, legend: { enable: true }, xAxis: { type: 'category' }, plot...
  • 柱状图 这里柱状图是渐变色 //基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById(‘land’)); //指定图表的配置项和数据 option = { tooltip: {}, legend: { data: [‘产值...
  • 饼图可根据个人需求来删减,以下是根据官网案例修改...混合图型双饼图,且自定义是否显示柱状图legend,带点击事件</title> </head> <body> <div id="echarsID" style="height: 400px;"><
  • 柱状图

    2020-08-06 15:47:47
    柱状图柱状图柱状图 option = { legend: { //selectedMode: 'single', data: ['个性化健康', '市场护理', '政府供给', '娱乐康复','心理咨询', '床位数', '社区服务', '8'], }, xAxis: { type: '...
  • 团队名作为legend,日期作为x轴,销量y轴 数据为: datas:[{ date:"2019-10-01", groupdata:[{groupname:"团队1",price:"1000.0"}, groupname:"团队2",price:"2000.0"}] }] series的属性要以legend的...
  • 柱状图

    2021-01-17 11:14:48
    option = { legend: { data: [ '收入'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'value', show: false } ],
  • {color: ['#298DFF', ' #33CA66', '#61a0a8'],backgroundColor: '#FFFFFF',barWidth: 10,tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {left: '0%',icon: 'circle',textStyle: { //...
  • require([ 'echarts', 'echarts/chart/bar' ,'echarts/chart/line'// 使用柱状图就加载bar模块,按需加载 ], drewEcharts ); function drewEcharts(ec) { // 基于准备好的dom,初始化echarts图表 ...
  • tooltip : { trigger: 'axis', formatter: function (params, ticket, callback) { var showHtm=""; console.log(params...
  • 如果给柱状图设置颜色,我们执行在 option 中 传入 color 字段的一个数组。...上面是根据柱状图 legend 中 data 进行颜色区分。如果我们只有一个类别,分别给xAxis 上的柱状图进行颜色区分,代码如下: ...
  • app.title = '堆叠条形';option = {tooltip : {trigger: 'axis',axisPointer : { // 坐标轴指示器,坐标轴触发有效type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'}},legend: {data: ['直接访问', '...
  • //指定图表的配置项和数据option ={title: {text:"",textStyle: {color:"#436EEE",fontSize:17}},tooltip: {trigger:'axis',axisPointer: {type:'shadow'}},legend: {data:[{name:'政策法规',icon:'circle',...
  • Legend放图外 当图片内容较多,图示legend可能会遮住视图。此时可将legend放在图外。...绘制柱状图,垂直、水平、垂直重叠: https://www.cnblogs.com/laumians-notes/p/8228445.html https://...
  • Echarts柱状图demo 第一次简单使用echarts图表,因此在博客记录一下 option = { legend: { data:['销量'], right: '10%' }, grid:{}, xAxis: { data: ["1月份","2月份","3月份","4月份","5月份","6月份","7...
  • 日常代码记载柱状图堆叠柱状图折线图 柱状图堆叠 // 主要是使用stack设置堆叠 leftOption = { title : { text: 'xxxxx', padding: [18,0,0,12] }, tooltip : { trigger: 'axis', axisPointer: { type: 'none...
  • 开发中,经常会用图表直接的展示数据,如何使用BizCharts制作柱状图呢? 参考网址:https://bizcharts.net/ 简单柱状图的编码过程 引入相关组件 import React from "react"; import { G2, Chart, Geom, Axis...
  • 安装echarts npm install echarts -S 安装完成之后,就可以直接使用了 注意: 如果在安装echarts之后,在main.js进行了全局引入: ... 使用echarts:创建一个vue文件,如Chart.vue,在该文件中绘制图表 效果展示:
  • echarts柱状图

    2018-12-17 10:41:39
    import echarts from ‘echarts’ export default { name: ‘WasteRecyceTrend’, data() { return { name: ‘回收各类废品动态’, ...legend: { data: [‘邮件营销’, ‘联盟广告’, ‘视频广告’, ‘直接访问...
  • QCustomplot绘制柱状图及显示数据 结果图: 如图所示,当鼠标移动到柱形长方块,会显示对应的纵坐标值。 具体实现代码: //柱状图绘制(时间对比柱状图) void Timetable::timeHistogram_make() { ui->plot_time-...
  • MATLAB柱状图去掉黑色边框

    千次阅读 2019-03-18 11:27:43
    用MATLAB生成柱状图后,感觉柱图和图例的黑色边框很影响美观,如下图, 不如这样的图更清爽一些, 设置方法如下: b=bar(data1); set(b,'edgecolor','none'); h = legend('SS', 'SS+EB100', 'ours'); set(h,...
  • if(datatype==1){ //1代表整数,显示柱状图 $('#container').highcharts({ chart : { type : 'column' }, legend: { //去除x轴底部的标题前的圆点 ...
  • 我的实现方式是使用再堆叠一个柱状图的形式来显示标签,具体为 颜色为透明色,标签位于内部下方(insideBottom),然后是重写tooltip的formatter,最后就是在触发legend切换时,更换option.缺点是切换legend时需要写好...
  • (1)安装依赖:npm install bizcharts --savenpm install @antv/data-set(2)图表构成的使用(3)完整代码:【柱状图】import React, { Component } from 'react';import {Chart,Geom,Axis,Tooltip,Legend,} from ...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 287
精华内容 114
关键字:

legend柱状图