精华内容
下载资源
问答
  • vue echarts双柱状图

    2021-04-13 18:03:32
    vue echarts双柱状图

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

    <template>
      <div class="MonthsCon">
        <div id="MonthsConChart" style="flex: 1; height: 230px; padding-right: 40px; padding-left: 20px"></div>
      </div>
    </template>
    
    <script>
    import { getHotLine } from '@/api/government';
    export default {
      data() {
        return {
          xData: [],
          yetData: [], // 已办结
          inData: [], // 受理中
          rateData: [], // 办结率
        };
      },
      mounted() {
        this.getHotLine();
      },
      methods: {
        initMap() {
          var myChart = this.$echarts.init(document.getElementById('MonthsConChart'));
          const option = {
            grid: {
              bottom: '10%',
              left: '12%',
            },
            legend: {
              top: '2%',
              right: 50,
              textStyle: {
                color: '#fff',
                fontSize: 12,
                fontFamily: 'TencentSans',
              },
              itemWidth: 14,
              itemHeight: 6,
              itemGap: 40,
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
                textStyle: {
                  color: '#fff',
                  fontFamily: 'TencentSans',
                },
              },
            },
            xAxis: [
              {
                type: 'category',
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(29, 163, 255, 1)',
                  },
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                splitArea: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                  color: 'rgba(29, 163, 255, 1)',
                  fontSize: 14,
                  fontFamily: 'TencentSans',
                },
                data: this.xData,
              },
            ],
            yAxis: [
              {
                type: 'value',
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(71, 126, 171, 1)',
                  },
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(29, 163, 255, 1)',
                  },
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                  color: 'rgba(29, 163, 255, 1)',
                  fontSize: 14,
                  fontFamily: 'TencentSans',
                },
                splitArea: {
                  show: false,
                },
              },
              {
                type: 'value',
                splitLine: {
                  show: false,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(29, 163, 255, 1)',
                  },
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                  color: 'rgba(29, 163, 255, 1)',
                  fontSize: 14,
                  fontFamily: 'TencentSans',
                },
                splitArea: {
                  show: false,
                },
              },
            ],
            series: [
              {
                name: '已办结',
                type: 'bar',
                barMaxWidth: 35,
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(0, 181, 255, 1)', // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: 'rgba(0, 181, 255, 1)', // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                  },
                },
                data: this.yetData,
              },
              {
                name: '受理中',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(230, 116, 32, 1)', // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: 'rgba(254, 252, 65, 1)', // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                    barBorderRadius: 0,
                  },
                },
                data: this.inData,
              },
              {
                name: '办结率',
                type: 'line',
                symbol: 'none',
                yAxisIndex: 1,
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(249, 15, 108, 0)', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgba(255, 125, 143, 1)', // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
                lineStyle: {
                  normal: {
                    width: 2,
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(249, 15, 108, 1)', // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: 'rgba(249, 15, 108, 1)', // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                  },
                },
                data: this.rateData,
              },
            ],
          };
          myChart.setOption(option);
        },
        getHotLine() {
          getHotLine().then((res) => {
            const { status, data } = res;
            const { hotlineDealStatisticsOfMonth } = JSON.parse(data);
            if (status === 200) {
              this.xData = hotlineDealStatisticsOfMonth.map((item) => {
                return item.name;
              });
              this.yetData = hotlineDealStatisticsOfMonth.map((item) => {
                return item.doneCount;
              });
              this.inData = hotlineDealStatisticsOfMonth.map((item) => {
                return item.ingCount;
              });
              const ofMonthItem = hotlineDealStatisticsOfMonth.map((item) => {
                return item.rate;
              });
              (this.rateData = ofMonthItem.map((item) => {
                return Number(item.slice(0, item.length - 1));
              })),
    
              this.initMap();
            }
          });
        },
      },
    };
    </script>
    
    

    over
    在这里插入图片描述

    展开全文
  • echarts 双柱状图:https://www.makeapie.com/editor.html?c=xTJyYkJflT echarts X轴带滚动条的柱状图:https://www.makeapie.com/editor.html?c=xG3rZAFEqu

    echarts 双柱状图:https://www.makeapie.com/editor.html?c=xTJyYkJflT

    echarts X轴带滚动条的柱状图: https://www.makeapie.com/editor.html?c=xG3rZAFEqu

    X轴带滚动条的折线图:先看效果:

    地址:https://blog.csdn.net/yinge0508/article/details/108493636

    展开全文
  • ECharts双柱

    2020-12-22 17:35:27
    <div id="myChart" :style="{ width: '500px', height: '400px' }"></div> js里面 ... var ticket = this.$echarts.init(document.getElementById("myChart")); var ticketOption = { .
     <div id="myChart" :style="{ width: '500px', height: '400px' }"></div>
    

    js里面

    drawManyBar(container, titleName, legendData, xData, seriesDatas) {
        var ticket = this.$echarts.init(document.getElementById("myChart"));
        var ticketOption = {
            //标题样式
            title : {
                text : titleName,
                textStyle : {
                    color : '#17273B',
                },
                left : 'left'
            },
            //提示框
            tooltip : {
                trigger : 'axis',
                backgroundColor : 'gray',
                axisPointer : {
                    type : 'shadow'
                },
                //提示信息格式,支持html样式
                formatter : function(params) {
                    var res = '<div style="color:#00C7FF">';
                    res += '<strong>' + params[0].name + '(万元)</strong>';
                    for ( var i = 0, l = params.length; i < l; i++) {
                        res += '<br/>' + ((i == 4) ? '&nbsp;&nbsp;' : '')
                                + params[i].seriesName + ' : '
                                + params[i].value;
                    }
                    res += '</div>';
                    return res;
                }
            },
            //菜单
            legend : {
                //菜单字体样式
                textStyle : {
                    color : '#17273B'
                },
                //菜单位置
                // x : 'right',
                 bottom : '0',
                 left:'20',
                //菜单数据
                data : legendData
            },
    
            xAxis : [ {
                type : 'category',
                axisLine : {
                    show : true,
                    //x轴线样式
                    lineStyle : {
                        color : '#17273B',
                        width : 1,
                        type : 'solid',
                    }
                },
                //x轴字体设置
                axisLabel : {
                    show : true,
                    fontSize : 12,
                    color : '#17273B'
                },
                data : xData
            } ],
            yAxis : [ {
                type : 'value',
                //y轴字体设置
                axisLabel : {
                    show : true,
                    color : '#17273B',
                    fontSize : 12,          
                    // formatter : function(value) {
                    //     return value + '万';
                    // }
                },
            max: 5000,
            } ],
            series : [  {
                name : '押金数',
                type : 'bar',
                barWidth :30,
                itemStyle : {
                    color : 'rgb(59,161,255)',
                },
                data : seriesDatas[0]
            }, {
                name : '押桶数',
                type : 'bar',
                barWidth : 30,
                itemStyle : {
                    color : 'rgb(249,205,20)',
                },
                data : seriesDatas[1]
            } ]
        };
        ticket.setOption(ticketOption);
    },
    

    调用

        this.service({    //请求
              method: "post",
              url: "/api/admin/getBucketStatisticsLsit",
              data: data,
            })
            .then((res) => {   //请求成功之后得到要用的数据
            that.tongjilist=res.data
                var titleName = '押桶统计图';
                var legendData = [ '押金数', '押桶数' ];
                var xData = [];
                var seriesDatas = [[  ], [  ]];
                for(var k in res.data.list){
                xData.push(res.data.list[k].class_name)
                seriesDatas[0].push(res.data.list[k].amount)
                seriesDatas[1].push(res.data.list[k].number)
    }
       that.drawManyBar('manyBar', titleName, legendData, xData, seriesDatas);
            });
    

    效果图
    在这里插入图片描述

    展开全文
  • optionoption = {title : {text: '双数值柱形图',subtext: '纯属虚构'},tooltip : {trigger: 'axis',axisPointer:{show: true,type : 'cross',lineStyle: {type : 'dashed',width : 1}},formatter : function ...

    option

    option = {

    title : {

    text: '双数值柱形图',

    subtext: '纯属虚构'

    },

    tooltip : {

    trigger: 'axis',

    axisPointer:{

    show: true,

    type : 'cross',

    lineStyle: {

    type : 'dashed',

    width : 1

    }

    },

    formatter : function (params) {

    return params.seriesName + ' : [ '

    + params.value[0] + ', '

    + params.value[1] + ' ]';

    }

    },

    legend: {

    data:['数据1','数据2']

    },

    toolbox: {

    show : true,

    feature : {

    mark : {show: true},

    dataView : {show: true, readOnly: false},

    magicType : {show: true, type: ['line', 'bar']},

    restore : {show: true},

    saveAsImage : {show: true}

    }

    },

    calculable : true,

    xAxis : [

    {

    type : 'value'

    }

    ],

    yAxis : [

    {

    type : 'value',

    axisLine: {

    lineStyle: {

    color: '#dc143c'

    }

    }

    }

    ],

    series : [

    {

    name:'数据1',

    type:'bar',

    data:[

    [1.5, 10], [5, 7], [8, 8], [12, 6], [11, 12], [16, 9], [14, 6], [17, 4], [19, 9]

    ],

    markPoint : {

    data : [

    // 纵轴,默认

    {type : 'max', name: '最大值',symbol: 'emptyCircle', itemStyle:{normal:{color:'#dc143c',label:{position:'top'}}}},

    {type : 'min', name: '最小值',symbol: 'emptyCircle', itemStyle:{normal:{color:'#dc143c',label:{position:'bottom'}}}},

    // 横轴

    {type : 'max', name: '最大值', valueIndex: 0, symbol: 'emptyCircle', itemStyle:{normal:{color:'#1e90ff',label:{position:'right'}}}},

    {type : 'min', name: '最小值', valueIndex: 0, symbol: 'emptyCircle', itemStyle:{normal:{color:'#1e90ff',label:{position:'left'}}}}

    ]

    },

    markLine : {

    data : [

    // 纵轴,默认

    {type : 'max', name: '最大值', itemStyle:{normal:{color:'#dc143c'}}},

    {type : 'min', name: '最小值', itemStyle:{normal:{color:'#dc143c'}}},

    {type : 'average', name : '平均值', itemStyle:{normal:{color:'#dc143c'}}},

    // 横轴

    {type : 'max', name: '最大值', valueIndex: 0, itemStyle:{normal:{color:'#1e90ff'}}},

    {type : 'min', name: '最小值', valueIndex: 0, itemStyle:{normal:{color:'#1e90ff'}}},

    {type : 'average', name : '平均值', valueIndex: 0, itemStyle:{normal:{color:'#1e90ff'}}}

    ]

    }

    },

    {

    name:'数据2',

    type:'bar',

    barHeight:10,

    data:[

    [1, 2], [2, 3], [4, 4], [7, 5], [11, 11], [18, 15]

    ]

    }

    ]

    };

    展开全文
  • echarts 双柱图配置

    2021-05-11 17:23:48
    ‘印尼’,‘美国’,‘印度’,‘中国’] } ], series : [ { name:‘2011年’, itemStyle : { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 1, color: ‘#83bff6’}, {offset: 0.5, color: ‘#...
  • 前言在此之前,已经跟大家分享了如何使用echarts画折线图、双折线图、柱状图,今天跟大家分享一下使用echarts画多维柱状图。使用echarts遇到过的坑:一定要给图表容器添加宽度与高度。图表在容器中可以调整位置,让...
  • 多系列层叠,个性化样式,代码如下:option = {title : {text: 'ECharts2 vs ECharts1',subtext: 'Chrome下测试数据'},tooltip : {trigger: 'axis'},legend: {data:['ECharts1 - 2k数据','ECharts1 - 2w数据','...
  • 介绍双向柱状图多用于展示包含相反含义的数据的对比。其中图表的一个轴显示正在比较的类别,而另一轴代表对应的刻度值。双向柱状图一般用于正负两份相反数据的对比。例如一周内个人收入和支出的统计,其中收入为正数...
  • echarts 双柱堆叠图实现

    千次阅读 2018-08-15 14:05:27
    app.title = ‘堆叠柱状图’; option = { tooltip : { trigger: ‘axis’, axisPointer: { type: “cross”, label: { formatter: function (params) { ...
  • export default {// 父组件传递过来的数据 (两种方式声明:1.数组 2.对象)props: {titleText: {type:String,default: () => {return ''}}, // 图表名称isPercentage: {type:Boolean}, // 是否是%// 原来的数组...
  • 不喜勿喷自己下载个echarts.min.js直接上代码:ECharts// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text:...
  • 柱状图和折线图的组合图是excel里很容易实现的一个... 不知道yihui接的是echarts2还是echarts3,在echarts3里显示数据label是单独的一条label语句,但R里要放到itemStyle中,否则报错。 总的来说很方便,定制性很高。
  • 效果图 直接贴代码,拿走不谢,别忘记点赞加关注 在这里插入代码片 option = { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { ... tr
  • 本文实例讲述了jQuery插件echarts实现的多柱子柱状图效果。分享给大家供大家参考,具体如下:1、问题背景:利用ECharts制作一个多柱子柱状图,其中数据源模拟动态获取2、实现源码:echarts-多柱子柱状图body,...
  • 安装echarts: npm install echarts -S 或者 cnpm install echarts -S(淘宝镜像) main.js引入 全局引入: import echarts from 'echarts' Vue.prototype.$echarts = echarts 按需引入: 示例引入的是柱状 import...
  • Echarts柱状图 双柱

    2020-09-04 15:45:06
    tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, formatter(params) { let list = [] let listItem = '';...
  • 如何使用echarts简单实现双柱状图重叠效果 代码实现 在series中配置如下代码 // 设置柱状的圆角 itemStyle: { barBorderRadius: 10 }, // 允许展示背景图 showBackground: true, // 设置背景图颜色和圆角 ...
  • 回溯项目还可以,不完善还没有进度百分比先保存着project // 绘制图表。 var opt = { title: { text: '工作流甘特图' }, ... echarts.init(document.getElementById('main')).setOption(opt); 效果图如下 image.png
  • function init(){ require( [ 'echarts', 'echarts/chart/bar' ], //自建项目饼状图设置 function (ec) { var myChart = ec.init(document.getElementById('charts_div')); var option = { title: { text: '', ...
  • return { type: 'rect', shape: echarts.graphic.clipRectByRect({ x: start[0], y: start[1] - height / 2, width: end[0] - start[0], height: height }, { x: params.coordSys.x, y: params.coordSys.y, width: ...

空空如也

空空如也

1 2 3
收藏数 53
精华内容 21
关键字:

echarts双柱