精华内容
下载资源
问答
  • 该案例设置 echarts 柱状图渐变色,同样也可以应用折线图、圆形图等。效果说明:https://blog.csdn.net/qq_36437172/article/details/106115048
  • 主要是针对echarts图表应用的实例开发,柱状图实例中针对item的斜体展示方法,鼠标移动到每个item时的数据展示(函数计算方式)。线状图的简单实例应用。
  • echarts柱状图

    2019-11-11 16:38:14
    里面包含了echarts柱状图和饼状图的一些动态获取数据的demo属于一个简洁明了的小demo方便参考,如果需要其他的功能,介意自己努力练习
  • Echarts 柱状图自动刷新数据,前台js的写法,不涉及到后台,下载打开即可查看效果
  • 采用vue对echarts柱状图的封装,可简单方便地配置/设计图表
  • echarts 柱状图

    2020-01-02 16:12:59
    echarts 实现简单柱状图绘制(示例代码为uap项目上实现,包括前台js相关代码、java代码、echarts.js )
  • 使用ECharts+Java实现的完整案例,包括实现柱状图和饼图,代码完整,有数据库文件,数据库为Oracle
  • 百度开源图表插件Echarts示例。包含柱状图和折线图在一块的调用示例。
  • 主要为大家详细介绍了springboot动态加载Echarts柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 代码片段: ;height:400px;"> ;height:250px;"> ;height:250px;"> ;height:250px;"> ;height:250px;"> ;height:250px;"> ;height:250px;"> ;height:250px;"></div>
  • echarts柱状图、饼状图、条形图

    热门讨论 2015-04-30 10:52:18
    echarts柱状图、饼状图、条形图等等,帮你快速的解决各种图形。里面包含各种实例,可快速入手,无难度。
  • echarts柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
  • 重点参数配置: 柱状图的位置 y轴消失 x轴的线条、刻度线消失但是文字保留 ...echarts柱状图的详细配置官方文档 <template> <div id="barchart_container"></div> </template> <scrip.

    在这里插入图片描述
    重点参数配置:

    1. 柱状图的位置
    2. y轴消失
    3. x轴的线条、刻度线消失但是文字保留
    4. 柱状图的面积阴影
    5. 柱状图顶部的一个数量标记说明配置。
    6. x轴,y轴是由线条、刻度标记,文字组成的。
    7. series的data的每一项可以单独进行配置,也可以进行一个整体的配置。
    8. echarts官方demo
    9. echarts柱状图的详细配置官方文档
    <template>
      <div id="barchart_container"></div>
    </template>
    <script>
    import * as echarts from "echarts";
    export default {
      data() {
        return {};
      },
      created() {},
      mounted() {
        var bar = echarts.init(document.getElementById("barchart_container"));
        var option = {
          //柱状图位置
          grid: {
            // left: "3%",
            // right: "4%",
            bottom: 100,
            // height: 200
            show: false
            // containLabel: true,
          },
          //图例部分
          legend: {
            left: 84,
            bottom: 41,
            data: ["自我评分", "师兄评分"],
            textStyle: {
              fontSize: 18,
              fontFamily: "Source Han Sans CN",
              fontWeight: "bold",
              color: "#333333",
            },
            itemGap: 185,
            itemWidth: 19,
            itemHeight: 7,
            inactiveColor: "#f60", //图例关闭时的颜色
          },
          //x轴配置
          xAxis: {
          //类型
            type: "category",
          //数据 data中的每一项的字体样式可以单独配置
            data: ["html", "css", "javascript", "框架", "jquery"],
          // 线条
            axisLine: {
              show: false,
            },
           //刻度
            axisTick: {
              show: false,
            },
           //文字配置
            axisLabel: {
              show: true,
              margin: 12,
              fontSize: 15,
              fontFamily: "Source Han Sans CN",
              fontWeight: 500,
              color: "#333333",
            },
          },
    	//y轴配置
          yAxis: [
            {
              show: false
            },
          ],
          //数据系列
          series: [
            {
              name: "自我评分",
              type: "bar",
              data: [2.0, 3.0, 4.0, 5.0, 10.0],
              //每一条柱状图的样式展示
              itemStyle: {
                color: "#FC9708",
                background: "#FC9708",
                shadowColor: "#FC9708",
                //阴影
                shadowOffsetX: 4,
                shadowOffsetY: 5,
                shadowBlur: 10,
                borderRadius: "4 4 0 0",
                //  opacity: 0.6
              },
              //柱状图顶部的数量标注
              markPoint: {
                symbol: "pin",//相当于是type
                symbolSize: "65",//size
                symbolOffset: [0, -1],//位置偏移量
                //是否显示标注的值
                label: {
                  show: true,
                  fontFamily: "wgsFont",//该字体是我自己引入的lcd字体,不知道怎么引入,私聊。
                  fontSize: 44,
                },
                //哪些值显示标注,只有这三种数据显示,目前不能都做到显示,其实也可以做到都显示但是效果可能不好
                data: [
                  { type: "max", name: "最大值" },
                  { type: "min", name: "最小值" },
                  { type: "average", name: "平均值" },
                ],
              },
              //这是一个平均线
              //   markLine: {
              //     data: [{ type: "average", name: "平均值" }],
              //   },
            },
            {
              name: "师兄评分",
              type: "bar",
              data: [3.0, 4.0, 6.0, 8.0, 11.0],
              itemStyle: {
                color: "#2E5AFB",
                // color: "#FC9708",
                background: "#2E5AFB",
                shadowColor: "#2E5AFB",
                shadowOffsetX: 4,
                shadowOffsetY: 5,
                shadowBlur: 10,
                borderRadius: "4 4 0 0",
              },
              markPoint: {
                symbol: "pin",
                symbolSize: "65",
                symbolOffset: [0, -1],
                //是否标注的值
                label: {
                  show: true,
                  fontFamily: "wgsFont",
                  fontSize: 44,
                },
                data: [
                  { type: "max", name: "最大值" },
                  { type: "min", name: "最小值" },
                  { type: "average", name: "平均值" },
                ],
              },
              //   markLine: {
              //     data: [{ type: "average", name: "平均值" }],
              //   },
            },
          ],
        };
    
        bar.setOption(option);
      },
      methods: {},
      computed: {},
    };
    </script>
    <style scoped>
    #barchart_container {
      width: 560px;
      height: 328px;
      /* FIXME:ZUJIAN WEI ZHI */
      margin: 20px 0 0 20px;
      background: #ffffff;
      box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.2);
      border-radius: 10px;
    }
    </style>
    
    展开全文
  • 'K', 'Pie', 'Radar', 'Chord', 'Force', 'Map', 'Gauge', 'Funnel'] } ], yAxis: [ { type: 'value', show: false } ], series: [ { name: 'ECharts例子个数统计', type: 'bar', itemStyle: { normal: { color: ...
    option = {
    
        tooltip: {
            trigger: 'item',
           formatter:'{c}%'    //这是关键,在需要的地方加上就行了
        },
        grid: {
            borderWidth: 0,
            y: 80,
            y2: 60
        },
        xAxis: [
            {
                type: 'category',
                show: false,
                data: ['Line', 'Bar', 'Scatter', 'K', 'Pie', 'Radar', 'Chord', 'Force', 'Map', 'Gauge', 'Funnel']
            }
        ],
        yAxis: [
            {
                type: 'value',
                show: false
            }
        ],
        series: [
            {
                name: 'ECharts例子个数统计',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{b}\n{c}%'    //这是关键,在需要的地方加上就行了
                        }
                    }
                },
                data: [12,21,10,4,12,5,6,5,25,23,7],
            }
        ]
    };

     

    展开全文
  • 深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点 先看效果图 我们可以看到图中图表不仅有渐变色,同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来,我们一起来实现一下这个效果 1. HTML部分 <div...

    深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点

    先看效果图

    我们可以看到图中图表不仅有渐变色,同时柱状图顶部位置有一个不相同的顶部亮点(图片)

    接下来,我们一起来实现一下这个效果

    1. HTML部分

    <div id="ParkingLotLoadRanking" ref="ParkingLotLoadRanking" style="height:16.875rem;width:25%;"></div>
    

    2. JS部分

    	// 获取DOM元素
        let myChart = echarts.init(document.getElementById('ParkingLotLoadRanking'));
        // 左侧名称列表
        let className = ['1号停车场', '2号停车场', '3号停车场', '4号停车场', '5号停车场', '6号停车场', '7号停车场']
        let data = [50, 28, 17, 38, 90, 73, 39]
        let serviceCount = [50, 28, 17, 38, 90, 73, 39]
        // 顶部亮点图列表 在Echarts中如果想使用Base64位图片必须在前边加上 'image://',否则不生效
        let circleList = [
          'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAFdklEQVRYhY1YTY/bRBh+/BHbiRN7l02bqst+st1dVT0gceXABYk7PfYPwIELv4IfABJ3euuBCxKCKxckBEKi2y1F6Xa3abTZT+fLHxnbaMZje+zE3Y70aiLPzPs888w778xEin/8EO9YJKGbVDEkrvhdWdSKBumGehGJReBVdVZyApsPk/roicSdi4aKb4sUEK38jeLEHIdVRQWOnsgLgORCLWsKzFUDqlmHXEvGRzMCMnEx6XmIgpCDRaU6saMnMTYfRpmMQgzIJdCiNTebqHc6kHUbMYkQBT7ikCReFBWypkNSZUS+A/f0FOOjMSdRtlgglikgypwCK8z0FQPWzgYkpQn/8grT3jFmo0ggjMxhrSWjsWqhcXcP9c4Yo5fH8AYugFDQOSVBx8apAqkzRQBXYd1bhnF7G8HVNZznV4hDhZNWuIkEQm4EkhLC3luGtrwEb9DF8MUV+560R7xmpFXMB1kCYu+1obc3MD7qY9qbAagDqHFTKwhQkBnicIbrgyEaqy6am9uQ5Fdwnp8LfaW0FpcgX3NzvcXARy/6cAchB9e5aZxEqhaEWVGiAQCftU97PuJZH617GzBdH5Njh4/JglKdi3i1XkNzbQuTNwO4A8LBjZJpXAWRAOHgnkBOgjtwoZgD5tM/ewripkHJMFMHuQr2fgehTzB+ORVmTUmYAJoAWgAsAHbJLN7W5H1z1agv6pP6LgZvYRdIkGsKVLOD64Mel1njM6fOGtxxg33rfLwNe3+DjXYOX+H0t64we0nYasnSjLrnWLq/CrnWZ3mDkygSsHdtRLMA/iXhYJqgQELAuvc+9r98BOPWeqbdnU+Ajc+PcfjdDxi+eC2Akywu/MsJ800xrp6epQTkwi5QmzYCZ8yJqYIKCYn6nTYefP1FATwt9Btto31y+TVh16jMN8UQMOWCAnKtgeDaK+SCnISGDx59CrW5PAeeLWhzmfVJ+xe3rMx8yzVTPE+KQSgpOmbD2cKMyBLTzoNK8LQkfcRkJWdKU9+SoolBKJeGS4gjlLZmbkrdupGA0rAqx+e+s1ImEPNVKR+riYX+6EYCoTeqHJ/7XkggRhwGqFk1IYqjQo4fdZ/dSGDUPRTyfij4iZlviiGQSAkkDKPZFJplCMBEyHABuo9/BZlWq0Dbuo9/yfrn4xMi1DfFEC4ossAmBpk4qC01CwdLnts9TE5Ocfjt9wicwRx44CRttE+SkHw+dpaRoL4phoCpZuDURl0HKx9tQVuiW6ac25MMd/l3F79/9Q1WP7uP1vY6l/0YvZ8PEIf07J9yc/nYRAnqU9F1XP/jiAoUCZApAZkO0Npq4+KvMz5YFRJWcuzSdXz90x8A/uTjIz5TnwOnBHIVWlu3mG+KUVoCCCQiOAd9KA0d5pohKJA6pVmSxsCQngAlG/K28ZwC1JfSMJjv/EaEVAFxq0QgLoHbfwlzfQdk2oN/4S3I7W+7D/gF01ckmOsduP3/mO/SJbW4BKkjGguKfgJ7fw3Df9/AO/OEwAxuvBGlshu3FFi7dxFcnjCf+bYsxEB6RUovCSGrr58NYO9FsHY3ob93Aee5w52rhQuHuHzi1rX3bOjtFfjnR/w6Fop3wXRceikt3/9TABX1TgOt7Q12unnnV5icjBB65fhJlkExAHOtBaO9zOQfdV/BPZ1yUlFJgUgkAIFA+V2QkLF2LRjt25BVC2HgI/LpuyCZiaTIkHUdiqYjIkP4F2dcsaiUDefeBSKBRQeIPFerpgJz3YRq1NlDhAlJIhDPxeR4AjKZm2U58BblgfTNFvPnWeHqLMQHQCYSnGd+xeM0fwNWAGbPMv42rHqelx+gVa/lcnnba1gkl5Wq53m587v8NyCOXfR7vgD4H8khvGFl000HAAAAAElFTkSuQmCC',
          'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAFb0lEQVRYhY1YW28bRRT+ZtbrS24mjVu3btPUDoiqFIEQ4gUh8dKX8hf4A/wT+Am88cA7b5GgrxVPFIREL0rapHHbOHGcxM7Fa3u9c9BMZrZn1+umI43W2j2Xb75z5pwZi89/JLznEExMTFGhKb+njtyUD+KCZxaILOfTnvGIAfj3z5/hmjGcnpjyLosBPtPvtB+yfsxIMBCuQWY4komnD09eRVHMoISc1R9jTH0EahcDhIisM5V6mhmugfz75t35qlgOyJTTxJQ3MCcqqIo8yhRBIcQQCmOrmYOPgvAgaYQedbCnXuPUgkhPYsBiBjjNzrGnp1hEUd7CCiTmqIsjtYsmnRllyfSMQTELKa5iQVTxsXcZp6qJJh0gAAwrbjgQWpc4gLTznKxjUSyhgR660Qu8hDLv8w5cCkBEZ4joBU4h0fNWsSjr+IQWsKm2cDQlYQ2AdJKdO2+gIi5hhV6jpXYRAijpHLIzlwXAZAMQ6gBFGziWVxGIG2hIgW21iQ6TFe7JGYhjLmuY187VS7SoYwxr5wU78xaEZ+VhaY2Mc2AEYKi/q10MxRgtHUI5wFDtoGd14qTMpTNeFOHLGupqD23qmBVp58XUzFsWOICxdT5g4AR1EFAJbW2TDvGYBnFSCs5AzIJcRZVGGKtX6AOYsasu2d8lxoafAhDalfPwmOTUtsQi5rXt6DFe8zqSTEIfnphBNdrAG+sgb1fuAMzaZ7FxG40rNaxo5fYOtjefYZOtXrCtZkKjmuh4H+E6fLQQGrbEBACvjjKFGFHXCMxaAJyB2cvXcOPre/h+dgE33SpW7wCffoXmnw/w637LrJBYWExeUBdn2rb2Ea1j3wGQiV0wgzKdmAKSs9PnIOY/QOXb7/ADd+7G3AJu6m9ahoUpz3ZNztieQZn7lJwB4WOGjg2NcS1gIPJffoN7+SIW087d0N+0jJNPbVmpbQvfMCs4A2+TUKKAU0PZREXUhipV3J3m3A0rk2N6MmZa25YGWJyEMqUvSLGkTE0/j4WLAPgFI5Opz2zHIw2AbFDSbfW8k4U4uQhAODIymfrMdiYAgsIIcyZuxDpY5MrsYRtPLwJw2MYzm/1OT8UNSNtWplglWnC8YhqjL+bNvlestrsKN3r0EA/sCqeu/tFD/OHkmb4Bom1rH/yAIhkaQh89MY+5RGN5W9sH3QPsPfwdPwd9tNPOg/75Ny1jC9LQ6oYOhLHdN/0g0Q1jBlQTPe8u6qIMSb2J2m4q3M42Nn/7BT/d/gx3KtXzetDZQ/PZv3hCyvT+vp2B1TVMaJsij0K0HgMwIBIAKMCYBmjLZVSinqlWI9Z0XHmNSGH09B/8BeBvq897QcAAxCzIZVzWtrWPLAAOhFIbaMm7qMgaimrHKPNEdeV1eEE3HHAGtC1RRDH6D+vsRAQHgG8VRQOMqY0tUcOHIsAbOjJG0rX9XeeBIZ9iEULUUFVtPNe2kTqkJkLgDOlckHm8kqtYVlvYoQMDImKrfPeJyNIuluDJOmrUxSttk23LRAjcEckdErSQUM/Rlg0or45bqowDtWkMhLy2pw+lfOvKBsryEpbUIV7a45irC/GJOM2AYB+MoFakE/TlMla8L1CmQxypFk4MuZNVVOn+J6+Z45xuWMNoG09o3yTkGMnjOTJ3AYvn252xj9NoH09lHQtiCVdyVdwifScYYYjIynqmxRSEjwKNcUxdbKkXhjGVqoYqlXMTu4BnO88LqbZwiC10RQmeuI5ZUUAJecvCGIqOEag3OKMgEefM21F6F5hh72xkr2eJozPLD1AAQc9NELIup9x4VkOCu5ZN3A3dC+6MGZt2W06Pd92G3QITY9r1PEHTe/43wHWzfk8OAP8D28XBfaJJ48oAAAAASUVORK5CYII='
        ]
        // 设置每个状图颜色
        var colorList = ['#FCD298', '#24FDE7', '#24FDE7', '#24FDE7', '#24FDE7', '#24FDE7', '#24FDE7'];
        // 设置默认值
        var defaultData = [100, 100, 100, 100, 100, 100, 100]
        let option = {
          grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            top: '10%',
            containLabel: true
          },
          backgroundColor: 'rgb(49,69,81)',
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#B9E4E6'
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: className
          },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: '12'
              },
              formatter: function (value) {
                return value + ' %';
              },
            },
            data: data
          }
          ],
          series: [{
            name: '停放车辆数',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              data: serviceCount,
              normal: {
                barBorderRadius: 0,
                color: function (params) {
                  // 大于等于50%的是黄色 反之为蓝色
                  var colorList = [
                    ['rgba(252, 210, 152, .2)', 'rgba(252, 210, 152, 1)'],
                    ['rgba(36, 253, 231, .2)', 'rgba(36, 253, 231, 1)'],
                  ];
                  var colorItem
                  if (params.data >= 50) {
                    colorItem = colorList[0];
                  } else {
                    colorItem = colorList[1];
                  }
                  // 设置线条渐变色
                  return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colorItem[0]
                  },
                  {
                    offset: 1,
                    color: colorItem[1]
                  }
                  ], false);
                }
    
              },
            },
            barWidth: 4,
            data: data
          },
          {
            name: '背景',
            type: 'bar',
            barWidth: 4,
            barGap: '-100%',
            data: defaultData,
            itemStyle: {
              normal: {
                color: '#1B375E',
                barBorderRadius: 0,
              }
            },
          },
          {
            name: 'XXX',
            type: 'pictorialBar',
            symbol: function (params, value) {
              // 设置图片
              if (params >= 50) return circleList[0]
              return circleList[1]
            },
            symbolPosition: 'end',
            symbolSize: [30, 30],
            symbolOffset: [10, 0],
            z: 20,
            data: data
          }
          ]
        };
        myChart.setOption(option);
        window.onresize = () => {
          myChart.resize();
        };
    

    效果图

    在这里插入图片描述

    展开全文
  • echarts横向柱状图

    2019-10-12 16:46:46
    设置echarts多个柱状图重叠或者叠加情况,堆叠是数据不会叠加,可以设置堆叠(stack),否则没有,是叠加横向柱状图,柱形图显示数值,以及设置隐藏一段方案(关联和不关联),鼠标移动上去显示的提示内容,动态改变...
  • echarts柱状图竖着展示

    2021-09-18 11:58:27
    }, plain3() { let plains = this.$echarts.init(this.$refs.plain_ref3); plains.setOption({ legend: { data: ["原合同金额", "变更后合同金额"], top: "5%", left: "20", textStyle: { color: "rgba(250,250,250...

    在这里插入图片描述

    <template>
      <div>
        <div class="bodyblock">
          <div class="main">
            <div
              class="plain3"
              ref="plain_ref3"
              :style="{ height: zoomNum * 490 + 'px', zoom: 1 / zoomNum }"
            ></div>
          </div>
        </div>
      </div>
    </template>
    
     data() {
        return {
          zoomNum: window.screen.width / 1920,
        };
      },
    
     plain3() {
          let plains = this.$echarts.init(this.$refs.plain_ref3);
          plains.setOption({  
           legend: {
              data: ["原合同金额", "变更后合同金额"],
              top: "5%",
              left: "20",
              textStyle: {
                color: "rgba(250,250,250,0.6)",
                fontSize: 16,
              },
            },
            barWidth: 15,
            grid:{
                x:'35%',
                y:'20%',
            },
            xAxis: {
              type: "value",
              splitLine: {
                lineStyle: {
                  color: "rgba(255,255,255,0.2)",
                },
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
    
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: false,
              },
            },
            yAxis: {
              type: "category",
              data: [
                "自定义",
                "自定义",
                "自定义",
                "自定义",
              ],
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                    color: '#25B2DD',
                    width:2
                }
    
              },
              axisLabel: {
                  show:true,
    
                //   formatter:function(value){
                //       var texts = value;
                //       if(texts.length>8){
                //           texts=texts.substr(0,8)+'...';
                          
                //       }
                //       return texts;
                      
                //   },
                //  改变y轴字体颜色和大小
                //formatter: '{value} m³ ', //  给y轴添加单位
                textStyle: {
                  color: "rgba(250,250,250,0.6)",
                  fontSize: 16,
                },
              },
              rich: {
                value: { fontSize: 16 },
                img: {
                  height: 15,
                  // backgroundColor:{img:'./images/矩形 30 拷贝 2.png'}
                },
              },
            },
    
            series: [
              {
                type: "bar",
                name: "原合同金额",
                barWidth: '10px',
                barGap: '50%' ,
                itemStyle: {
                  normal: {
                    label: {
                      show: true, //开启显示
                      position: "right", //在上方显示
                      textStyle: {
                        //数值样式
                        color: "rgba(250,250,250,0.6)",
                        fontSize: 16,
                        fontWeight: 600,
                      },
                    },
                    // 用new echarts引入会报错
                    // color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    //   {
                    //     offset: 0,
                    //     color: "#FD626C",
                    //   },
                    //   {
                    //     offset: 1,
                    //     color: "#FF777B",
                    //   },
                    // ]),
                      // 柱体颜色渐变
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      type: "linear",
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#FD626C",
                        },
                        {
                          offset: 1,
                          color: "#FF777B",
                        },
                      ],
                    },
    
                    borderWidth: 2,
                  },
                },
                data: [19, 29, 39, 25, 21],
              },
              {
                type: "bar",
                name: "变更后合同金额",
                barWidth: '10px',
                barGap: '80%' ,
                itemStyle: {
                  normal: {
                    label: {
                      show: true, //开启显示
                      position: "right", //在上方显示
                      textStyle: {
                        //数值样式
                        color: "rgba(250,250,250,0.6)",
                        fontSize: 14,
                        fontWeight: 400,
                      },
                    },
                    // 柱体颜色渐变
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      type: "linear",
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#25B2DD",
                        },
                        {
                          offset: 1,
                          color: "#4E9BF2",
                        },
                      ],
                    },
                    borderWidth: 2,
                  },
                },
                data: [12, 23, 35, 20, 17],
              },
            ],
        })
        }, 
         mounted: function () {
        this.plain3();
      },
    
    <style type="text/css">
    .main {
      width: 100%;
      height: 100%;
    }
    .plain3 {
      width: 550px;
    }
    </style>
    
    
    展开全文
  • echarts 柱状图颜色设置

    千次阅读 2020-03-28 21:31:41
    如果给柱状图设置颜色,我们执行在 option 中 传入 color 字段的一个数组。代码如下: option = { color: ['#2EB7BD', '#3CE1D9', '#FBBACB', '#4695D1'], ... } 上面是根据柱状图 legend 中 data 进行颜色...
  • : yAxis: [ { type: 'value', axisLabel: { textStyle: { color: '#ffffff', fontSize: '1rem'
  • 柱状图中的表头显式在series下的itemStyle下的normal下的label下的formatter中设置 点击事件就是:【先获取柱状图的div 然后和 对象.on() 】 var myChart = echarts.init(document.getElementById('main')); ...
  • echarts柱状图顶部添加图片

    千次阅读 2021-01-12 16:30:57
    最近有个需求,在特定柱状图顶部要求展示图片,搜了下关于这方面的文章比较少,来记录下。 series:[ ... markPoint:{ symbol:'image://url',//url替换成你的图片地址 symbolSize:10,//图片大小 symbolOffset...
  • echarts 柱状图自适应app,完善的方案代码,可直接运行。且里面包含,颜色自定义、formatter回调显示等等,整个设计方案已经比较完善。
  • 完整配置可查看 Echarts Bar横向柱状图 柱体的属性设置series中label可以是一个函数,在函数中处理。可以设置位置,字体颜色和大小等。核心代码为params.value[params.encode.x[0]]。 let series = [ { // ...... ...
  • 效果: 直接上代码: let option = { color: ["#bb0004", "#FFD48A"], tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | '...
  • 效果: 代码: option: { color: ["#29676a", "#4CCEFE"], tooltip: {}, grid:{ top:20, height:120 }, xAxis: { data: ['2021-8-1', '2021-8-2', '2021-8-3', '2021-8-4', '2021-8-5', '2021-8-6'],
  • yAxis: { max:24, inverse: true, // <-----------倒 叙----------- splitLine: { show: false }, axisTick: { show: false }, axisLine: {//y轴文字颜色 s...
  • 以 官网为例:
  • Echarts柱状图禁用高亮解决方案 仅供参考自我记录. 使用series下的itemStyle解决 //鼠标悬停高亮时: emphasis: { color: 'red',//此方法适用一种柱状图颜色的时候 } 此处的坑 项目需求一旦一条data 要区分不同...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,397
精华内容 6,158
关键字:

echarts柱状图