首页 > 资讯 > 前端开发 > JavaScript >vue中Echarts使用动态数据的两种实现方式

820

分享到

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

vue Echarts Echarts动态数据 vue使用Echarts动态数据 2022-11-13 18:11:39 820人浏览薄情痞子

摘要

目录Echarts使用动态数据的两种方式1.通过computed2.在data中定义optionVue Echarts几种常用图表动态数据切换1.柱状图 2.平滑折线面积图

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;
}

---

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue中Echarts使用动态数据的两种实现方式

本文链接: https://www.lsjlt.com/news/169896.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

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

下载Word文档

去做题

京东一面：post为什么会发送两次请求？???

2024-01-12

鼠标划过时整行变色284607详解

2023-05-20

鼠标划过时整行变色284415处理办法

2023-05-20

TypeScript接口和类型的区别小结

2023-05-20

细说JS数组遍历的一些细节及实现

2023-05-20

深入浅出JavaScript前端中的设计模式

2023-05-20

初学者如何快速搭建Express开发系统步骤详解

2023-05-20

JavaScrip简单数据类型隐式转换的实现

2023-05-20

前端Website sitemap.xml文件搜索引擎优化

2023-05-20

vue使用Swiper踩坑解决避坑

2023-05-20

热门问答

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

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

目录

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

1.通过computed

2.在data中定义option

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

1.柱状图

2.平滑折线面积图

3.折线图堆叠

4.饼状图

本篇文章演示代码以及资料文档资料下载

MVVM 架构：释放 JavaScript 应用程序的全部潜力

JavaScript MVVM 架构的深入剖析：揭开数据绑定的秘密

MVVM 架构：让 JavaScript 前端开发变得轻而易举

初学者指南：JavaScript MVVM 架构基础知识

MVVM 架构的优势：简化 JavaScript 应用程序开发

JavaScript 中 MVVM 架构的常见陷阱和最佳实践

MVVM 设计模式：理解 JavaScript 数据流的艺术

JavaScript MVVM：解锁数据绑定的强大力量

MVVM 架构的奥秘：提升 JavaScript 应用程序响应能力

JavaScript MVVM 架构的秘诀：揭开前端开发的秘密

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

细说JS数组遍历的一些细节及实现

深入浅出JavaScript前端中的设计模式

初学者如何快速搭建Express开发系统步骤详解

JavaScrip简单数据类型隐式转换的实现

前端Website sitemap.xml文件搜索引擎优化

vue使用Swiper踩坑解决避坑