精华内容
下载资源
问答
  • echarts柱形图legend设置每个柱子颜色

    万次阅读 2019-03-06 10:57:49
    设置每个柱子对应一个...legend对应每个series 的name来 option = { legend: { // 对应series的name data:['直接访问','邮件营销','联盟广告','视频广告''] }, grid: { left: '3%', right: '4%', bottom...

    设置每个柱子对应一个图标。legend对应每个series 的name来

    option = {
        legend: {  // 对应series的name
            data:['直接访问','邮件营销','联盟广告','视频广告'']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
         tooltip : {
            //trigger: 'axis',    //显示其他分类
            axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
            }
        },
        xAxis : [
            {
                type : 'category',
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'直接访问',
                stack: '广告',  //设置分类,同一类合并,多个series数据成一个柱
                type:'bar',
                itemStyle: {   //配置样式,设置每个柱子的颜色
                   normal:{  
                      color: function (params){
                      var colorList = ['#f54882','#47d1de','#8058bd','#ffd84f'];
                       return colorList[params.dataIndex];
                   }
             },
                data:[320]
            },
            {
                name:'邮件营销',
                type:'bar',
                stack: '广告',
                data:[0, 132]
            },
            {
                name:'联盟广告',
                type:'bar',
                stack: '广告',
                data:[0, 0, 191,]
            },
            {
                name:'视频广告',
                type:'bar',
                stack: '广告',
                data:[0, 0, 0, 154]
            },
        ]
    };

    设置。所以要定义多组

    展开全文
  • 实现legend文字颜色与环状颜色一致 legend:{ textStyle:{ color:"#fft" //就是这个!超神奇 } }

    如图实现 legend文字颜色与环状图颜色一致

    legend:{
    textStyle:{
       color:"#fft" //就是这个!超神奇
    }
    }

     

    展开全文
  • labels: { rotation: -45 // 设置轴标签旋转角度 } }, yAxis: { min: 0, title: { text: '人口 (百万)' } }, legend: { enabled: false }, tooltip: { pointFormat: '人口总量: {point.y:.1f} 百万' }, series: [{ ...

    3cf01ca5d39d4395d69c1c92bba722dc.png

    JS 代码:

    var chart = Highcharts.chart('container', {

    chart: {

    type: 'column'

    },

    title: {

    text: '全球各大城市人口排行'

    },

    subtitle: {

    text: '数据截止 2017-03,来源: Wikipedia'

    },

    xAxis: {

    type: 'category',

    labels: {

    rotation: -45 // 设置轴标签旋转角度

    }

    },

    yAxis: {

    min: 0,

    title: {

    text: '人口 (百万)'

    }

    },

    legend: {

    enabled: false

    },

    tooltip: {

    pointFormat: '人口总量: {point.y:.1f} 百万'

    },

    series: [{

    name: '总人口',

    data: [

    ['上海', 24.25],

    ['卡拉奇', 23.50],

    ['北京', 21.51],

    ['德里', 16.78],

    ['拉各斯', 16.06],

    ['天津', 15.20],

    ['伊斯坦布尔', 14.16],

    ['东京', 13.51],

    ['广州', 13.08],

    ['孟买', 12.44],

    ['莫斯科', 12.19],

    ['圣保罗', 12.03],

    ['深圳', 10.46],

    ['雅加达', 10.07],

    ['拉合尔', 10.05],

    ['首尔', 9.99],

    ['武汉', 9.78],

    ['金沙萨', 9.73],

    ['开罗', 9.27],

    ['墨西哥', 8.87]

    ],

    dataLabels: {

    enabled: true,

    rotation: -90,

    color: '#FFFFFF',

    align: 'right',

    format: '{point.y:.1f}', // :.1f 为保留 1 位小数

    y: 10

    }

    }]

    });

    HTML 代码:

    /* css 代码 */

    // JS 代码

    展开全文
  • g2绘制双折线图+柱形图+自定义legend

    千次阅读 2020-04-10 15:40:51
    这里绘制的柱形图是由双折线图的差值获得的,下面的代码可直接复制。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=...
    这里绘制的柱形图是由双折线图的差值获得的,下面的代码可直接复制。

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>柱状-折线(柱形的数据由折线差值得到)</title>
      </head>
      <body>
        <div id="container"></div>
        <script>
          /*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body
            .clientHeight
        </script>
        <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
        <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
    
        <script>
          const data1 = [
            {
              month: '12/07',
              type: '货币需求',
              value: 45
            },
            {
              month: '13/07',
              type: '货币需求',
              value: 39
            },
            {
              month: '14/07',
              type: '货币需求',
              value: 40
            }
          ]
    
          const data2 = [
            {
              month: '12/07',
              type: '货币供给',
              value: 33
            },
            {
              month: '13/07',
              type: '货币供给',
              value: 53
            },
            {
              month: '14/07',
              type: '货币供给',
              value: 32
            }
          ]
    
          //折线差的数组
          const gaps = []
          //当前所有数字的数组
          const nums = []
    
          const data3 = data1.map((item, index) => {
            const gap = item.value - data2[index].value
            gaps.push(gap)
            nums.push(item.value)
            nums.push(data2[index].value)
            return {
              month: item.month,
              value: gap,
              type: '货币缺口'
            }
          })
    
          const data4 = [...data1, ...data2]
          console.log(data4, data3)
    
          const chart = new G2.Chart({
            container: 'container',
            width: 300,
            height: 180,
            padding: 'auto'
          })
    
          chart.scale('value', {
            min: Math.min(...gaps) - 1,
            max: Math.max(...nums) + 1
          })
    
          const view3 = chart.view()
          view3.source(data3)
          view3
            .interval()
            .position('month*value')
            .color('month', ['l(270) 0:#007bc7 1:#00dffd']) //柱形图渐变
    
          const view4 = chart.view()
          view4.source(data4)
          view4
            .line()
            .position('month*value')
            .color('type', ['#FFA900', '#FE5264'])
            .shape('smooth')
    
          view4.axis('month', false)
          view4.axis('value', false)
    
          //自定义legend
          chart.legend({
            custom: true,
            clickable: false,
            textStyle: {
              fill: '#9bb7ef'
            },
            items: [
              {
                value: '货币缺口',
                marker: {
                  symbol: 'square',
                  fill: '#3bf',
                  radius: 5,
                  lineWidth: 5
                }
              },
              {
                value: '货币需求',
                marker: {
                  symbol: 'hyphen',
                  fill: '#FFA900',
                  stroke: '#FFA900',
                  radius: 5
                }
              },
              {
                value: '货币供给',
                marker: {
                  symbol: 'hyphen',
                  fill: '#FE5264',
                  stroke: '#FE5264',
                  radius: 5
                }
              }
            ]
          })
          chart.tooltip(false)
    
          chart.render()
        </script>
      </body>
    </html>
    
    展开全文
  • echarts柱状图legend分2行排列

    千次阅读 2020-07-02 11:52:06
    /* * 讲legend分成2个,然后排列方式变成水平排列,最后使用 * bottom来讲将 2着区分开 */ legend:[{ orient: 'horizontal', itemWidth: 10, itemHeight: 10, left:'2%', bo
  • 快速绘制几种简单的柱状图。1垂直柱图(普通柱图)绘制普通柱图的python代码如下:(左右滑动可以查看全部代码)12345678910111213141516171819202122232425262728# -*- coding:utf-8 -*-# 申明编码格式为utf-8...
  • ggplot分组柱形图调整legend的大小

    千次阅读 2020-11-20 20:29:04
    参考:https://www.cnblogs.com/emanlee/p/5373649.html 先放一个gallery里的例子 # library library(ggplot2) # ...然后还可以通过调整legend.margin来调整图例四周的空白区域的大小,这在把图例嵌入到中时很有用。
  • == '') { message += item.seriesName + ':' + item.data + ' ' } }) return message } }, legend: { show: true, right: '5%', top: '5%', orient: 'horizontal', icon: 'rect', itemWidth: 10, itemHeight: 10, ...
  • 关于折线图的画法,请参考: ...如何画柱状图? 直接上代码: y = [197.9 163.8;220.45 166.95;319 265.7]; % y轴数据(柱状图高度),两个分号之间为一组数据 bar(y); % 画柱状图 Cell = {'10', '20', '40'}; s...
  • 本文实例讲述了Python实现绘制双柱状图并显示数值功能。分享给大家供大家参考,具体如下:# -*- coding:utf-8 -*-#! python3import matplotlib.pyplot as pltimport mpl_toolkits.mplot3d#定义函数来显示柱状上的...
  • // 柱状图设置 chart .interval() .label("num", { offset: -10 }) .size(36) .position('name*num') .tooltip('num*score', (num, score) => { return { num, score } }) .color("city") // 折线图设置 隐藏...
  • var cate = ['Green', 'Pink']; Highcharts.chart('container', { chart: { type: 'column' }, legend: { enable: true }, xAxis: { type: 'category' }, plot...
  • 二、柱状图 Bar <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico"> <meta nam...
  • 团队名作为legend,日期作为x轴,销量y轴 数据为: datas:[{ date:"2019-10-01", groupdata:[{groupname:"团队1",price:"1000.0"}, groupname:"团队2",price:"2000.0"}] }] series的属性要以legend的...
  • height = rect.get_height() plt.text(rect.get_x() + rect.get_width() / 2, height, height, ha='center', va='bottom') # 柱形图边缘用白色填充,纯粹为了美观 rect.set_edgecolor('white') add_labels(rects1) ...
  • dojo柱形图

    千次阅读 2014-03-24 22:42:44
    dojo柱形图添加属性 1、给柱状图的柱子填充颜色 .addSeries("A",[45,56,12,23,78,67],{stroke:{color:"#FF0000",width:2},fill:"#00FF00"}). 2、给柱状图的柱子添加Tooltip new dojox.charting.action2d.Tooltip...
  • 在很多的报告、年鉴等中我们常看到柱状图柱状图也称条图、长条图,是一种以长方形的长度为变量的表达图形的统计报告图,只有一个变量,通常利用于较小的数据集分析。下面我就向大家介绍一下如何画散点图。工具/...
  • 在Dash的API文档上,虽然把属性都写的很清楚...柱形图就是将一系列数据,转化成可视化的柱状图谱,可以让人很直观的看出数据的问题所以,方便分析数据,接下来介绍每一个比较好用的属性: - x : 横轴的数据,一般...
  • 在这里我先记录下竖直的柱状图怎么绘制在这里一般用到的函数就是bar# bar(left, height, width=0.8, bottom=None, hold=None, **kwargs)# 绘制柱形图# left:柱形图的x坐标# height柱形图的高度,以0.0为基准# width:...
  • tooltip : { trigger: 'axis', formatter: function (params, ticket, callback) { var showHtm=""; console.log(params...
  • python 画条形图(柱状图

    万次阅读 多人点赞 2019-08-24 00:06:35
    条形图(bar chart),也称为柱状图,是一种以长方形的长度为变量的统计图表,长方形的长度与它所对应的变量数值呈一定比例。 1. 竖放条形图 画条形图要用到 pyplot 中的 bar 函数,该函数的基...
  • python画柱状图bar:并列柱状图

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

    万次阅读 热门讨论 2017-09-02 12:56:06
    echarts地图上放柱状图,echarts柱状图和地图,echarts地图和柱状图

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,806
精华内容 7,922
关键字:

legend柱状图