我的编程空间，编程开发者的网络收藏夹
学习永远不晚
位置：首页-资讯-前端开发

vue中Echarts使用动态数据的两种实现方式

2022-11-13 18:41

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号
获取短信验证
立即预约

请填写图片验证码后获取短信验证码

看不清楚，换张图片

免费获取短信验证码

vue中Echarts使用动态数据的两种实现方式

Echarts使用动态数据的两种方式

在使用Echarts时我们数据一般不是静态写死的，而是通过后端接口动态获取的，在此总结两种在vue框架下Echarts使用动态数据的方式。

1.通过computed

computed: {
    options() {
      let that = this;
      let option = {
          tooltip : {
            trigger: 'axis',
            formatter: function(item) {
              return `支付金额 ${item[0].value}元`
            }
          },
          legend: {
            formatter: function(item){
              return `${item}: ${that.priceData.todayPrice}`
            }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]
          },
          yAxis: {
              type: 'value',
              splitLine: { //网格线
                show: false
              }
          },
          series: [{
              data: that.priceData.timePriceRange,
              type: 'line',
              smooth: true,
              name: '支付金额',
              itemStyle : {
                                normal : {
                  color: '#13CE66',
                                    lineStyle:{
                                        color:'#13CE66'
                                    }
                                }
                            }
          }]
      }
      return option;
    }
  },
//初始化
initEcharts(){
      let  myChart = Echarts.init(this.$refs.chart);
      myChart.setOption(this.options);
    }

2.在data中定义option

通过在初始化之前，直接改变option对应属性值

//在data中定义option
initEcharts(){
      this.option.yAxis[1].max = this.maxRate;
      this.option.xAxis.data = this.dateList;
      this.option.series[0].data = this.payPriceTrendList;
      let  myChart = Echarts.init(this.$refs.chart);
      myChart.setOption(this.option);
    }

数据变化后需要再次调init方法刷线图表

vue Echarts几种常用图表动态数据切换

几种常用图表 

1.柱状图 

效果图

柱状图

代码片段

HTML部分：

<div ref="echartMain1" id="echart-main"></div>

JS部分：

getEchartData() {
      this.$http
        .post("/sys/currency/twelvemonthstatistic", {
          traddingOrgId:id,
        })
        .then(({ data }) => {
        //示例数据
        data=[
    {
        "ym": "2021-06",
        "countOrder": 0,
        "sumGuaranteeFee": 0,
        "sumBzjAmount": 0,
        "sumGuaranteeFeeToWanYuan": 0,
        "sumBzjAmountToWanYuan": 0
    },
    {
        "ym": "2021-07",
        "countOrder": 0,
        "sumGuaranteeFee": 0,
        "sumBzjAmount": 0,
        "sumGuaranteeFeeToWanYuan": 0,
        "sumBzjAmountToWanYuan": 0
    },
    {
        "ym": "2021-08",
        "countOrder": 0,
        "sumGuaranteeFee": 0,
        "sumBzjAmount": 0,
        "sumGuaranteeFeeToWanYuan": 0,
        "sumBzjAmountToWanYuan": 0
    },
    {
        "ym": "2021-09",
        "countOrder": 0,
        "sumGuaranteeFee": 0,
        "sumBzjAmount": 0,
        "sumGuaranteeFeeToWanYuan": 0,
        "sumBzjAmountToWanYuan": 0
    },
    {
        "ym": "2021-10",
        "countOrder": 0,
        "sumGuaranteeFee": 0,
        "sumBzjAmount": 0,
        "sumGuaranteeFeeToWanYuan": 0,
        "sumBzjAmountToWanYuan": 0
    },
    {
        "ym": "2021-11",
        "countOrder": 0,
        "sumGuaranteeFee": 0,
        "sumBzjAmount": 0,
        "sumGuaranteeFeeToWanYuan": 0,
        "sumBzjAmountToWanYuan": 0
    },
    {
        "ym": "2021-12",
        "countOrder": 0,
        "sumGuaranteeFee": 0,
        "sumBzjAmount": 0,
        "sumGuaranteeFeeToWanYuan": 0,
        "sumBzjAmountToWanYuan": 0
    },
    {
        "ym": "2022-01",
        "countOrder": 0,
        "sumGuaranteeFee": 0,
        "sumBzjAmount": 0,
        "sumGuaranteeFeeToWanYuan": 0,
        "sumBzjAmountToWanYuan": 0
    },
    {
        "ym": "2022-02",
        "countOrder": 0,
        "sumGuaranteeFee": 0,
        "sumBzjAmount": 0,
        "sumGuaranteeFeeToWanYuan": 0,
        "sumBzjAmountToWanYuan": 0
    },
    {
        "ym": "2022-03",
        "countOrder": 0,
        "sumGuaranteeFee": 0,
        "sumBzjAmount": 0,
        "sumGuaranteeFeeToWanYuan": 0,
        "sumBzjAmountToWanYuan": 0
    },
    {
        "ym": "2022-04",
        "countOrder": 0,
        "sumGuaranteeFee": 0,
        "sumBzjAmount": 0,
        "sumGuaranteeFeeToWanYuan": 0,
        "sumBzjAmountToWanYuan": 0
    },
    {
        "ym": "2022-05",
        "countOrder": 0,
        "sumGuaranteeFee": 0,
        "sumBzjAmount": 0,
        "sumGuaranteeFeeToWanYuan": 0,
        "sumBzjAmountToWanYuan": 0
    }
]
          data.forEach((value, index) => {
            this.chartDate.push(value.ym);//X轴月份
            this.chartData.push(value.countOrder);//Y轴数量
          });
          this.echart();
        });
    },
    echart() {
      var myChart = echarts.init(this.$refs.echartMain1);
      let option = {
        xAxis: [
          {
            type: "category",
            data: this.chartDate,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "近12个月的出函数量（笔）",
            min: 0,
            max: 500,
            interval: 100,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            data: this.chartData,
            type: "bar",
          },
        ],
      };
      // echarts图表自适应
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

2.平滑折线面积图

效果图

面积折线图

代码片段

HTML部分：

<el-row :gutter="20" class="tittle">
          <el-col :span="16">
            <div class="text1">近12月保函数据</div>
          </el-col>
         <!-- <el-col :span="2">
            <div :class="{active:isActive2===1}" @click="getDataMon12(1)" class="cursor-pointer">保函数量</div>
          </el-col>
          <el-col :span="2">
            <div :class="{active:isActive2===2}" @click="getDataMon12(2)" class="cursor-pointer">保费收入</div>
          </el-col>
          <el-col :span="2">
            <div :class="{active:isActive2===3}" @click="getDataMon12(3)" class="cursor-pointer">担保金额</div>
          </el-col> -->
</el-row>
<div ref="echartDemo1" class="chart-box" style="height: 400px"></div>

JS部分：


    getDataMon12(filterType) {
      if (filterType) {
        this.isActive2 = filterType;
        // console.log('filterType高亮的是：',filterType,this.isActive2);
      }
      var monTop121 = [];
      var monTop122 = [];
      var monTop123 = [];
      var dataTop121 = [];
      var dataTop122 = [];
      var dataTop123 = [];
      this.$http
        .post("/sys/data/twelvemonthstatistic", {
          dataType: 1,
          filterType: filterType
        })
        .then(res => {
          // console.log("面积折线图数据是：", res.data);
          res.data.forEach((value, index) => {
            if (filterType == 1) {
              monTop121.push(value.ym);
              dataTop121.push(value.countOrder);
            } else if (filterType == 2) {
              monTop122.push(value.ym);
              dataTop122.push(value.sumGuaranteeFeeToWanYuan);
            } else if (filterType == 3) {
              monTop123.push(value.ym);
              dataTop123.push(value.sumBzjAmountToWanYuan);
            }
          });
          if (filterType == 1) {
            this.initChartBar1(monTop121, dataTop121);
          } else if (filterType == 2) {
            this.initChartBar1(monTop122, dataTop122);
          } else if (filterType == 3) {
            this.initChartBar1(monTop123, dataTop123);
          }
        });
    },
   
    
    initChartBar1(mon, data) {
      var option = {
        tooltip: {
          trigger: "axis"
        },
        title: {
          subtext: "保函数量(件)",
          left: "5%",
          top: "0%",
          textAlign: "center"
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: mon
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: data,
            type: "line",
            smooth: true,
            areaStyle: {}
          }
        ]
      };
      this.chartBar1 = echarts.init(this.$refs.echartDemo1);
      this.chartBar1.setOption(option);
      window.addEventListener("resize", () => {
        this.chartBar1.resize();
      });
    },

css部分：

// 选中时的样式
.active {
  color: #00a950;
}

3.折线图堆叠

效果图

层叠折线图

代码片段

HTML部分：

<el-row :gutter="20" class="tittle">
          <el-col :span="16">
            <div class="text1">近12月保函数据</div>
          </el-col>
         <!-- <el-col :span="2">
            <div :class="{active:isActive2===1}" @click="getDataMonLine(1)" class="cursor-pointer">保函数量</div>
          </el-col>
          <el-col :span="2">
            <div :class="{active:isActive2===2}" @click="getDataMonLine(2)" class="cursor-pointer">保费收入</div>
          </el-col>
          <el-col :span="2">
            <div :class="{active:isActive2===3}" @click="getDataMonLine(3)" class="cursor-pointer">担保金额</div>
          </el-col> -->
</el-row>
<div ref="echartDemo2" class="chart-box" style="height: 400px"></div>

JS部分：

 
    getDataMonLine(filterType) {
      if(filterType){
        this.isActive2=filterType
        // console.log('filterType高亮的是：',filterType,this.isActive2);
      }
      var monTop121 = [];
      var monTop122 = [];
      var monTop123 = [];
      var dataTop121 = [];
      var dataTop122 = [];
      var dataTop123 = [];
      this.$http
        .post("/sys/data/guaranteeorgtwelvemonthstatistic", {
          dataType: 1,
          filterType:filterType,
          
        })
        .then((res) => {
          // console.log("折线图数据/投标保函按月统计表格数据是：", res.data);
          this.twelvemonthDataLine = res.data;
        // 示例数据
        //   this.twelvemonthDataLine=[  
        //     { detailList: [
        //       {countOrder: 0, guaranteeOrgName: "08担保"}, 
        //       {countOrder: 0, guaranteeOrgName: "01担保"},
        //       {countOrder: 4, guaranteeOrgName: "中原银行股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "07担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "阳光保险"},
        //       {countOrder: 0, guaranteeOrgName: "中联银"},
        //       {countOrder: 0, guaranteeOrgName: "汇友保险"},
        //       {countOrder: 0, guaranteeOrgName: "02担保"},
        //     ],
        //     ym: "2021-06"},
        //     {detailList: [
        //       {countOrder: 20, guaranteeOrgName: "08担保"}, 
        //       {countOrder: 0, guaranteeOrgName: "01担保"},
        //       {countOrder: 9, guaranteeOrgName: "中原银行股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "07担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},
        //       {countOrder: 1, guaranteeOrgName: "长安责任保险股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "阳光保险"},
        //       {countOrder: 0, guaranteeOrgName: "中联银"},
        //       {countOrder: 0, guaranteeOrgName: "汇友保险"},
        //       {countOrder: 0, guaranteeOrgName: "02担保"},
        //     ],
        //     ym: "2021-07"},
        //     {detailList: [
        //     {countOrder: 6, guaranteeOrgName: "08担保"}, 
        //     {countOrder: 0, guaranteeOrgName: "01担保"},
        //     {countOrder: 0, guaranteeOrgName: "中原银行股份有限公司"},
        //     {countOrder: 0, guaranteeOrgName: "07担保"},
        //     {countOrder: 0, guaranteeOrgName: "06担保"},
        //     {countOrder: 0, guaranteeOrgName: "06担保"},
        //     {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},
        //     {countOrder: 1, guaranteeOrgName: "长安责任保险股份有限公司"},
        //     {countOrder: 0, guaranteeOrgName: "阳光保险"},
        //     {countOrder: 0, guaranteeOrgName: "中联银"},
        //     {countOrder: 1, guaranteeOrgName: "汇友保险"},
        //     {countOrder: 0, guaranteeOrgName: "02担保"},
        //   ],
        //     ym: "2021-08"},
        //     {detailList: [
        //   {countOrder: 0, guaranteeOrgName: "08担保"}, 
        //   {countOrder: 0, guaranteeOrgName: "01担保"},
        //   {countOrder: 4, guaranteeOrgName: "中原银行股份有限公司"},
        //   {countOrder: 0, guaranteeOrgName: "07担保"},
        //   {countOrder: 0, guaranteeOrgName: "06担保"},
        //   {countOrder: 0, guaranteeOrgName: "06担保"},
        //   {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},
        //   {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},
        //   {countOrder: 1, guaranteeOrgName: "阳光保险"},
        //   {countOrder: 0, guaranteeOrgName: "中联银"},
        //   {countOrder: 0, guaranteeOrgName: "汇友保险"},
        //   {countOrder: 0, guaranteeOrgName: "02担保"},
        // ],
        //     ym: "2021-09"},
        //       {detailList: [
        //       {countOrder: 0, guaranteeOrgName: "08担保"}, 
        //       {countOrder: 0, guaranteeOrgName: "01担保"},
        //       {countOrder: 4, guaranteeOrgName: "中原银行股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "07担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "阳光保险"},
        //       {countOrder: 0, guaranteeOrgName: "中联银"},
        //       {countOrder: 0, guaranteeOrgName: "汇友保险"},
        //       {countOrder: 0, guaranteeOrgName: "02担保"},
        //     ],ym: "2021-10"},
        //       {detailList: [
        //       {countOrder: 0, guaranteeOrgName: "08担保"}, 
        //       {countOrder: 0, guaranteeOrgName: "01担保"},
        //       {countOrder: 1, guaranteeOrgName: "中原银行股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "07担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "阳光保险"},
        //       {countOrder: 0, guaranteeOrgName: "中联银"},
        //       {countOrder: 0, guaranteeOrgName: "汇友保险"},
        //       {countOrder: 0, guaranteeOrgName: "02担保"},
        //     ],ym: "2021-11"},
        //       {detailList: [
        //       {countOrder: 0, guaranteeOrgName: "08担保"}, 
        //       {countOrder: 0, guaranteeOrgName: "01担保"},
        //       {countOrder: 0, guaranteeOrgName: "中原银行股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "07担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "阳光保险"},
        //       {countOrder: 0, guaranteeOrgName: "中联银"},
        //       {countOrder: 0, guaranteeOrgName: "汇友保险"},
        //       {countOrder: 0, guaranteeOrgName: "02担保"},
        //     ],ym: "2021-12"},
        //       {detailList: [
        //       {countOrder: 12, guaranteeOrgName: "08担保"}, 
        //       {countOrder: 4, guaranteeOrgName: "01担保"},
        //       {countOrder: 4, guaranteeOrgName: "中原银行股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "07担保"},
        //       {countOrder: 7, guaranteeOrgName: "06担保"},
        //       {countOrder: 3, guaranteeOrgName: "06担保"},
        //       {countOrder: 1, guaranteeOrgName: "河南华诚工程担保有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "阳光保险"},
        //       {countOrder: 0, guaranteeOrgName: "中联银"},
        //       {countOrder: 0, guaranteeOrgName: "汇友保险"},
        //       {countOrder: 0, guaranteeOrgName: "02担保"},
        //     ],ym: "2022-01"},
        //       {detailList: [
        //       {countOrder: 0, guaranteeOrgName: "08担保"}, 
        //       {countOrder: 0, guaranteeOrgName: "01担保"},
        //       {countOrder: 0, guaranteeOrgName: "中原银行股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "07担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "阳光保险"},
        //       {countOrder: 0, guaranteeOrgName: "中联银"},
        //       {countOrder: 0, guaranteeOrgName: "汇友保险"},
        //       {countOrder: 0, guaranteeOrgName: "02担保"},
        //     ],ym: "2022-02"},
        //       {detailList: [
        //       {countOrder: 0, guaranteeOrgName: "08担保"}, 
        //       {countOrder: 0, guaranteeOrgName: "01担保"},
        //       {countOrder: 0, guaranteeOrgName: "中原银行股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "07担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "阳光保险"},
        //       {countOrder: 0, guaranteeOrgName: "中联银"},
        //       {countOrder: 0, guaranteeOrgName: "汇友保险"},
        //       {countOrder: 0, guaranteeOrgName: "02担保"},
        //     ],ym: "2022-03"},
        //       {detailList: [
        //       {countOrder: 0, guaranteeOrgName: "08担保"}, 
        //       {countOrder: 6, guaranteeOrgName: "01担保"},
        //       {countOrder: 0, guaranteeOrgName: "中原银行股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "07担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "阳光保险"},
        //       {countOrder: 1, guaranteeOrgName: "中联银"},
        //       {countOrder: 0, guaranteeOrgName: "汇友保险"},
        //       {countOrder: 0, guaranteeOrgName: "02担保"},
        //     ],ym: "2022-04"},
        //       {detailList: [
        //       {countOrder: 3, guaranteeOrgName: "08担保"}, 
        //       {countOrder: 13, guaranteeOrgName: "01担保"},
        //       {countOrder: 0, guaranteeOrgName: "中原银行股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "07担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "06担保"},
        //       {countOrder: 0, guaranteeOrgName: "河南华诚工程担保有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "长安责任保险股份有限公司"},
        //       {countOrder: 0, guaranteeOrgName: "阳光保险"},
        //       {countOrder: 0, guaranteeOrgName: "中联银"},
        //       {countOrder: 0, guaranteeOrgName: "汇友保险"},
        //       {countOrder: 0, guaranteeOrgName: "02担保"},
        //     ],ym: "2022-05"}
        //             ]
          this.twelvemonthDataLine.forEach((value, index) => {
            if (filterType == 1) {
              monTop121.push(value.ym);
              dataTop121.push(value.detailList);
             
            } 
            else if (filterType == 2) {
              monTop122.push(value.ym);
              dataTop122.push(value.sumGuaranteeFeeToWanYuan);
            } else if (filterType == 3) {
              monTop123.push(value.ym);
              dataTop123.push(value.sumBzjAmountToWanYuan);
            }
          });
          if (filterType == 1) {
            this.initChartLine(monTop121, dataTop121)
          } else if (filterType == 2) {
            this.initChartLine(monTop122, dataTop122);
          } else if (filterType == 3) {
            this.initChartLine(monTop123,dataTop123);
          }
        });
    },
     
    initChartLine(mon, data) {
      // console.log('monTop121:',mon);
      let series = [];
      let leggend = [];
      for (let i = 0; i < data.length; i++) {
        let countOrders = [];
        leggend.push(data[i].guaranteeOrgName);
        // countOrders=[0,1,5,2,4,5,3,1,4,9,14,2]
        var arr = data[i];
        arr.forEach((item, index) => {
          countOrders.push(item.countOrder);
        });
        // 将数据组装到series数组，供option配置使用
        series.push({
          // 每个担保机构，对应一条折线图
          name: data[i].guaranteeOrgName,
          type: "line",
          data: countOrders // 每个担保机构，对应的横坐标的值组成的数组
        });
      }
      console.log(leggend);
      console.log("series是：", series);
      var option = {
        tooltip: {
          trigger: "axis"
        },
        title: {
          subtext: "保函数量(件)",
          left: "5%",
          top: "0%",
          textAlign: "center"
        },
        legend: {
          padding: 10,
          tooltip: {
            show: true
          },
          data: leggend
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: mon
        },
        yAxis: {
          type: "value"
        },
        series: series
      };
      this.chartLine = echarts.init(this.$refs.echartDemo2);
      this.chartLine.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLine.resize();
      });
    },

css部分：

// 选中时的样式
.active {
  color: #00a950;
}

4.饼状图

效果图

饼状图

代码片段

HTML部分：

 <div class="piechart">
        <div class="tittle">
          <div class="text1">交易平台统计</div>
          <el-date-picker v-model="![请添加图片描述](https://img-blog.csdnimg.cn/2c725dfca29f441aa477ce33bad2d9ed.png)
 type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:01', '23:59:59']" style="width: 390px" @change="timeHandle(4)">
          </el-date-picker>
        </div>
        <div ref="echartDemo3" class="chart-box" style="height: 400px"></div>
 </div>

JS部分：

	// 时间选择修改时数据刷新 1为投标保函按月合计 2为出函平台统计的时间选择器 3为出函机构统计的时间选择器 4为交易平台统计的时间选择器
    timeHandle(num) {
      var that = this;
      if (num == 1) {
        this.getMonthData(12, this.value1);
        //  this.value1=""
      } else if (num == 2) {
        this.getIssuinGuarantee("", this.value2);
        // this.value2=""
      } else if (num == 3) {
        this.getCensusData("", this.value3);
        // this.value3=""
      } else {
        this.getTradeData("", this.value4);
        // this.value4=""
      }
    },
    getIssuinGuarantee(days, time) {
      if (days) {
        this.isActive3 = days;
        // console.log('days高亮的是：',days,this.isActive3);
      }
      this.$http({
        url: "/sys/data/guaranteeorgplatformstatistic",
        method: "post",
        data: {
          dataType: 1,
          days: days,
          startTime: !time[0] ? "" : time[0],
          endTime: !time[1] ? "" : time[1]
        }
      }).then(res => {
        // console.log("出函平台数据：", res.data);
        this.issuinGuaranteeData = res.data;
        //后台响应数据是
         this.issuinGuaranteeData=[
         {
	        countOrder: 3
			countOrderRatio: 21.42
			sumBzjAmount: 3000
			sumBzjAmountRatio: 21.42
			sumBzjAmountToWanYuan: 0.3
			sumGuaranteeFee: 600
			sumGuaranteeFeeRatio: 10.9
			sumGuaranteeFeeToWanYuan: 0.06
			traddingOrgId: "303c3dfaa3c54864a1b67f5fee694231"
			traddingOrgName: "驻马店公共资源交易中心"
         },
         {
        	countOrder: 4
			countOrderRatio: 28.57
			sumBzjAmount: 4000
			sumBzjAmountRatio: 28.57
			sumBzjAmountToWanYuan: 0.4
			sumGuaranteeFee: 1400
			sumGuaranteeFeeRatio: 25.45
			sumGuaranteeFeeToWanYuan: 0.14
			traddingOrgId: "57f2e9ceb8834fe7ac37e06f9dab7aef"
			traddingOrgName: "通许县公共资源交易中心"
         },
         {
         	countOrder: 2
			countOrderRatio: 14.28
			sumBzjAmount: 2000
			sumBzjAmountRatio: 14.28
			sumBzjAmountToWanYuan: 0.2
			sumGuaranteeFee: 1000
			sumGuaranteeFeeRatio: 18.18
			sumGuaranteeFeeToWanYuan: 0.1
			traddingOrgId: "8af00e2ff8ea458da5b122495ee83303"
			traddingOrgName: "杞县公共资源交易中心"
         },
         {
         	countOrder: 5
			countOrderRatio: 35.73
			sumBzjAmount: 5000
			sumBzjAmountRatio: 35.73
			sumBzjAmountToWanYuan: 0.5
			sumGuaranteeFee: 2500
			sumGuaranteeFeeRatio: 45.47
			sumGuaranteeFeeToWanYuan: 0.25
			traddingOrgId: "c83acb963a4140438984b196abcec46c"
			traddingOrgName: "巩义公共资源交易中心"
         }
         
         ]
        this.initChartBar3(this.issuinGuaranteeData);
      });
    },

    initChartBar3(data) {
      var temp1 = [];
      var temp2 = [];
      var temp3 = [];
      data.forEach((value, index) => {
        temp1.push({
          name: value.guaranteeOrgName,
          value: value.countOrderRatio
        });
        temp2.push({
          name: value.guaranteeOrgName,
          value: value.sumGuaranteeFeeRatio
        });
        temp3.push({
          name: value.guaranteeOrgName,
          value: value.sumBzjAmountRatio
        });
      });
      // console.log(temp1)
      // console.log(temp2)
      // console.log(temp3)
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        title: [
          {
            subtext: "保函数量占比",
            left: "16.67%",
            top: "5%",
            textAlign: "center"
          },
          {
            subtext: "保函金额占比",
            left: "50%",
            top: "5%",
            textAlign: "center"
          },
          {
            subtext: "担保金额占比",
            left: "83.33%",
            top: "5%",
            textAlign: "center"
          }
        ],
        series: [
          {
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: temp1,
            right: "66.6667%"
          },
          {
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: temp2,
            left: "33.3333%",
            right: "33.3333%"
          },
          {
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: temp3,
            left: "66.6667%"
          }
        ]
      };
      this.chartBar3 = echarts.init(this.$refs.echartDemo3);
      this.chartBar3.setOption(option);
      window.addEventListener("resize", () => {
        this.chartBar3.resize();
      });
    },

css部分：

// 选中时的样式
.active {
  color: #00a950;
}

---

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vue EchartsEcharts动态数据vue使用Echarts动态数据
阅读原文内容投诉

vue中Echarts使用动态数据的两种实现方式

下载Word文档到电脑，方便收藏和打印～

下载Word文档

相关文章

猜你喜欢

vue中Echarts使用动态数据的两种实现方式

这篇文章主要介绍了vue中Echarts使用动态数据的两种实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-11-13

vue中使用echarts实现动态数据绑定以及获取后端接口数据

2024-04-02

vue中如何使用echarts实现动态数据绑定及获取后端接口数据

本篇内容主要讲解“vue中如何使用echarts实现动态数据绑定及获取后端接口数据”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue中如何使用echarts实现动态数据绑定及获取后端接口数据”
2023-07-02

Android实现listview动态加载数据分页的两种方法

在android开发中，经常需要使用数据分页，比如要实现一个新闻列表的显示，或者博文列表的显示，不可能第一次加载就展示出全部，这就需要使用分页的方法来加载数据，在android中Handler经常用来在耗时的工作中，它接收子线程发送的数据，
2022-06-06

Vue实现动态样式的多种方法汇总

2024-04-02

Vue使用Echarts实现数据可视化的方法详解

2024-04-02

Vue动态数据实现 el-select 多级联动、数据回显方式

2024-04-02

SpringBootEasyPoi动态导入导出的两种方式实现方法详解

2024-04-02

SpringBoot多数据源的两种实现方式实例

2024-04-02

Vue中使用定时器(setInterval、setTimeout)的两种方式

js中定时器有两种，一个是循环执行 setInterval，另一个是定时执行 setTimeout，这篇文章主要介绍了Vue中使用定时器 （setInterval、setTimeout）的两种方式,需要的朋友可以参考下
2023-03-19

vue中实现当前时间echarts图表时间轴动态的数据(实例代码)

这篇文章主要介绍了vue中实现当前时间echarts图表时间轴动态的数据，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-11-13

利用SpringBoot实现多数据源的两种方式总结

2024-04-02

深入理解java动态代理的两种实现方式（JDK/Cglib）

什么是代理模式？代理模式：在调用处不直接调用目标类进行操作，而是调用代理类，然后通过代理类来调用目标类进行操作。在代理类调用目标类的前后可以添加一些预处理和后处理操作来完成一些不属于目标类的功能。为什么要使用代理模式？通过代理模式可以实现对
2023-05-31

vue实现tab切换的3种方式及切换保持数据状态

2024-04-02

Vue中导入excel文件的两种方式及使用步骤

这篇文章主要介绍了Vue中导入excel文件的两种方式,大概有两种导入文件的方法：form表单和el-upload，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-22

MyBatis之自查询使用递归实现 N级联动效果(两种实现方式)

A：首先先看下一个简单的面试题斐波那契数列计算数组{1,1,2,3,5,8.......} 第30位值规律：1 1 从第三项开始，每一项都是前两项之和 有两种实现方式 第一种方式：public class TestOne { publ
2023-05-31

android实现图片闪烁动画效果的两种实现方式(实用性高)

大家在使用APP的时候，有的APP在点击语音搜索界面后，会出现一个小话筒，小话筒会类似雷达似得在闪烁，表示正在倾听你说话的内容（这个大家可以参照微软的必应APP），那么问题来了，这种动画效果是如何实现的呢？其实实现这种动画效果有很多种方法，
2022-06-06

Android中使用Gson解析JSON数据的两种方法

Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率. 从结构上看，所有的数据（data）最终都可以分解成三种类型： 第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如
2022-06-06

pytest用例间参数传递的两种实现方式示例

2024-04-02

Java使用selenium爬取b站动态的实现方式

2024-04-02

热门标签

Linux(148)PHP(127)Java(102)正则表达式(101)JavaScript(69)最佳实践(67)jQuery(44)MySQL(39)Docker(37)C语言(36)性能优化(34)Python(34)XML(28)string(27)第三方库(23)回调函数(23)ZIP(22)数组(22)可扩展性(22)字符串比较(21)find(20)RPM(20)Go(20)grep(19)ASP.NETCore(19)XML解析器(19)事件(19)事件处理程序(19)StringBuilder(18)Nginx(18)

编程热搜

查看更多

编程资源站

  • 资料下载
  • 历年试题
2021年下半年软考高级信息系统项目管理师高频考点精选资料
2021下半年软考高级信息系统技术知识点记忆口诀精选资料
2021下半年软考《信息系统项目管理师》考试真题及答案精选资料
2021下半年软考高级考试备考攻略精选资料
2021年软考高级《信息系统项目管理师》巩固练习题汇总精选资料
2021下半年软考高级信息系统项目管理师30个易考知识点汇总精选资料
2021下半年软考高级知识点这样记，还担心记不住吗精选资料
2021年下半年软考高级考试重点汇总精选资料
2021下半年软考高级信息系统项目管理师计算公式汇总精选资料
2021年下半年软考高级《信息系统项目管理师》模拟试题精选资料
查看更多
信息系统项目管理师选择题每日一练（2024）历年试题
2023年下半年信息系统项目管理师综合知识真题演练历年试题
查看更多

目录

本网页已闲置超过3分钟，按键盘任意键或点击空白处，即可回到网页
最新资讯更多
    友情链接编程网

    反馈

    我要
    反馈