echarts图形

最新推荐文章于 2024-11-27 16:35:36 发布
最新推荐文章于 2024-11-27 16:35:36 发布
阅读量480 收藏
点赞数
文章标签： 前端 echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_61169066/article/details/123048270
版权
本文介绍了如何使用Echarts实现柱状图和趋势图之间的切换，详细展示了从父界面到子界面的交互过程，以及具体的效果展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.实现效果

目录

 父界面

<template>
  <div>
    <div class="leftBoxs">
      <div class="throw flex">
        <div class="throw-r sixth flex">
          <div class="throw-r-item querter">
            <i class="iconfont icon-kehuishou blueColor"></i>
            <div class="throwChart">
              <Circles :color="blue"></Circles>
            </div>
            <p class="classificationnum">12.12 t</p>
            <p class="blueColor classificationname">可回收垃圾</p>
            <p class="blueColor classificationnameen">Recyclable</p>
          </div>
          <div class="throw-r-item querter">
            <i class="iconfont icon-chuyu greenColor"></i>
            <div class="throwChart">
              <Circles :color="green"></Circles>
            </div>
            <p class="classificationnum">34.31 t</p>
            <p class="greenColor classificationname">厨余垃圾</p>
            <p class="greenColor classificationnameen">Food waste</p>
          </div>
          <div class="throw-r-item querter">
            <i class="iconfont icon-youhai redColor"></i>
            <div class="throwChart">
              <Circles :color="red"></Circles>
            </div>
            <p class="classificationnum">0.02 t</p>
            <p class="redColor classificationname">有害垃圾</p>
            <p class="redColor classificationnameen">Hazardous waste</p>
          </div>
          <div class="throw-r-item querter">
            <i class="iconfont icon-kehuishou yellowColor"></i>
            <div class="throwChart">
              <Circles :color="yellow"></Circles>
            </div>
            <p class="classificationnum">12.12 t</p>
            <p class="yellowColor classificationname">其他垃圾</p>
            <p class="yellowColor classificationnameen">Other waste</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import Circles from "@/components/echarts/circle";
export default {
  components: {
    Circles,
  },
  data() {
    return {
      blue: "#27A1FF",
      green: "#16FFB3",
      red: "#E83C33",
      yellow: "#FFA02F",
    }
  },
};
</script>
<style lang="scss">


.throw {
  padding-top: 30px;

  .throw-l {
    .throw-l-l {
      img {
        width: 164px;
        height: 244px;
      }
    }

    .throw-l-r {
      width: calc(100% - 204px);
      margin-left: 40px;

      .todaytf {
        font-size: $pxthirtytwo;
        color: $colorwhite;
        font-weight: bold;
      }

      .todaytfALL {
        font-size: $pxsixty;
        color: $colorwhite;
        font-weight: bold;
        margin: 28px 0 7px;
        padding-bottom: 7px;
        border-bottom: 2px solid $colorsys;

        span {
          margin-left: 23px;
          font-size: $pxtwentyfour;
          color: $colorsys;
          font-weight: normal;
        }
      }

      .todaytfbili {
        font-size: $pxthirtytwo;
        color: $colorsys;
        margin-bottom: 8px;
      }

      .todaytftag {
        font-size: $pxtwentyfour;
        color: $colorsys;
        font-weight: 500;
      }
    }
  }

  .throw-r {
    .throw-r-item {
      text-align: center;

      .iconfont {
        font-size: $pxthirty;
      }

      .classificationnum {
        font-size: $pxtwentyfour;
        color: $colorwhite;
        font-weight: bold;
        text-align: center;
      }

      .classificationname {
        font-size: $pxtwentyfour;
        font-weight: bold;
        text-align: center;
      }

      .classificationnameen {
        font-size: $pxtwelve;
        text-align: center;
      }

      .throwChart {
        height: 12vh;
      }
    }
  }
}



</style>


</style>

子界面

<template>
  <div class="circle" ref="circle"></div>
</template>
<script>
export default {
  props: {
    data:Object,
    color:String,
  },
  data() {
    return {};
  },

  mounted() {
    this.$nextTick(() => {
      this.drawLine();
    });
  },
  watch: {
    data: function (newVal, oldVal) {
      this.$nextTick(() => {
        this.drawLine();
      });
    },
  },

  methods: {
    drawLine() {
      let myChart = this.$echarts.init(this.$refs.circle);
      var percent = 30;
      var option = {
          series: [
              {
                  type: 'pie',
                  radius: ['79%', '80%'],
                  label: {
                      normal: {
                          show: false
                      }
                  },
                  data: [{
                      name: '',
                      value: 100,
                      itemStyle: {
                          normal: {
                              color: '#fff',
                              shadowBlur:1,
                              shadowColor: '#3da1ee'
                          }
                      }
                  }],
                  zlevel: 1
              }, 
              {
                  name: 'main',
                  type: 'pie',
                  radius: ['76%', '82%'],
                  data: [
                      {
                          name: '完成率',
                          value: percent,
                          label: {
                              show: true,
                              position: 'center',
                              fontSize: 30,
                              formatter: '{d}%'
                          },
                          labelLine: {show: false},
                          itemStyle: {
                              normal: {
                                  color: this.color,
                                  shadowBlur: 3,
                                  shadowColor: '#f2c967'
                              }
                          }
                      },
                      {
                          value: 100 - percent,
                          itemStyle: {
                              normal: {
                                  color: 'transparent'
                              }
                          }
                      }
                  ],
                  zlevel: 2
              }
          ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      
    },
  },
};
</script>
<style lang="scss" scoped>
.circle {
  width: 100%;
  height: 100%;
}
</style>

实现效果

目录

父界面

<template>
  <div>
  <div class="mainPart-l fifth">
          <div class="mainPartChart">
            <Circless></Circless>
          </div>
        </div>
  </div>
</template>
<script>
import Circless from "@/components/echarts/circles";
export default {
  components: {
     Circless,
  },
  data() {
    return {
    }
  },
};
</script>
<style lang="scss">
  .mainPart-l {
  background-color: #000;
    .mainPartChart {
      height:25vh;
    }
  }

</style>

子界面

<template>
  <div class="circles" ref="circles"></div>
</template>
<script>
export default {
  props: {
    data:Object,
    color:String,
  },
  data() {
    return {};
  },

  mounted() {
    this.$nextTick(() => {
      this.drawLine();
    });
  },
  watch: {
    data: function (newVal, oldVal) {
      this.$nextTick(() => {
        this.drawLine();
      });
    },
  },

  methods: {
    drawLine() {
      let myChart = this.$echarts.init(this.$refs.circles);
      let chartData = {
        caseOccupyTotal: 234,
        caseOccupyData: [
            {
                name: '投放点',
                value: 10,
            },
            {
                name: '小区',
                value: 20,
            },
            {
                name: '公共机构',
                value: 20,
            },
            {
                name: '餐企',
                value: 10,
            },
            {
                name: '医院',
                value: 10,
            },
            {
                name: '商圈',
                value: 10,
            },
            {
                name: '学校',
                value: 4,
            },
            {
                name: '转运站',
                value: 10,
            },
            // {
            //     name: '处理厂',
            //     value: 4,
            // }
        ],
    };

    var data = chartData.caseOccupyData;
    // 总事件数
    let total = chartData.caseOccupyTotal;
    // 副标题
    let subtext = '总事件';
    // 配色数组
    let colors = ['rgba(91, 143, 249, 0.85)', '#00C283', '#5D7092', '#F6BD16','#E8684A','#6DC8EC','#9270CA','rgba(255, 157, 77, 0.85)','rgba(38, 154, 153, 0.85)'];
    var option = {
      title: {
          text: total,
          left: '18%',
          top: '42%',
          itemGap: 0,
          textStyle: {
              color: '#FFFFFF',
              fontSize: '25',
              fontWeight: 400
          },
          subtextStyle: {
              color: 'rgba(255, 255, 255, 0.4)',
              fontSize: '17',
              fontWeight: 400,
              lineHeight: '30'
          }
      },
      color: colors,
      legend: {
          itemWidth:50,
          itemHeight:6,
          icon:'circle',
          show: true,
          left: "60%",
          top: "0",
          itemGap:20,
          formatter: (name) => {
              return (
                  "{name|" + name + "}"
              );
          },
          padding: [0,0,0,0],
          textStyle: {
              color: "#beceff", //元字颜色
              fontSize: 24,
              rich: {
                  name: {
                      color: '#fff',
                      fontSize: 16,
                  }
              }
          },
      },
      tooltip: {
          show: true,
      },
      series: [
      {
          type: 'pie',
          roundCap: 0,
          hoverAnimation: false,
          radius: ['58%', '83%'],
          center: ['25%', '50%'],
          avoidLabelOverlap: false,
          label: {
              show: false,
              position: 'center'
          },
          emphasis: {
              show: false,
          },
          labelLine: {
              show: false
          },
          data: data,
      }]
  };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });

  },
  },
};
</script>
<style lang="scss" scoped>
.circles {
  width: 100%;
  height: 100%;
}
</style>

实现效果

实现柱状图和趋势图的切换

目录

父界面

<template>
  <div class="contentBox">
      <div class="mainPart flex">
        <div class="mainPart-l fifth fourSeries">
          <div class="sbflex">
            <h3 class="echarttitle">四分类月度投放统计</h3>
            <div class="fourSeriesBtn flex border">
              <div class="fourSeriesBtn-l whiteColor fifth alignCenter" @click="fouClick('柱状图')"
                :style="{background: fourName == '柱状图' ? '#00C283' : 'none',color: fourName == '柱状图' ? '#fff' : '#00C283'}">
                柱状图</div>
              <div class="fourSeriesBtn-r whiteColor fifth alignCenter" @click="fouClick('趋势图')"
                :style="{background: fourName == '趋势图' ? '#00C283' : 'none',color: fourName == '趋势图' ? '#fff' : '#00C283'}">
                趋势图</div>
            </div>
          </div>
          <div class="fourSeries-b">
            <el-carousel :autoplay="module1" indicator-position="none" :initial-index="fourIndex" :interval="interval" ref="setfouActive"
              @change="qiehuan">
              <el-carousel-item name="柱状图">
                <FourBars :color="fourColor" style="height:20vh;"></FourBars>
              </el-carousel-item>
              <el-carousel-item name="趋势图">
                <FourLines :color="fourColor" style="height:20vh;"></FourLines>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
import FourBars from "@/components/echarts/fourbar.vue";
import FourLines from "@/components/echarts/fourline.vue";
export default {
  components: {
    FourBars,
    FourLines,
  },
  data() {
    return {
      fourName: "柱状图",
      fourColor: ["#27A1FF", "#16FFB3", "#E83C33", "#FFA02F"],
      fourIndex: 0,
      interval: 6000,
      canchuIndex: 0,
      module1:false,
      module2:false,
    };
  },

  watch: {
  },
  methods: {
    fouClick(m) {
      this.fourName = m;
      this.$refs.setfouActive.setActiveItem(m);
    },
    qiehuan(m) {
      if (m == 0) {
        this.fourName = "柱状图";
      } else {
        this.fourName = "趋势图";
      }
    },
  },
  mounted() {},
};
</script>
<style lang="scss">
.contentBox{
  background-color: #333;
}

.mainPart {
  margin-top: 45px;

  .mainPart-l {
    .mainPartChart {
      height: 16vh;
    }
  }
  .mainPart-r {
    .flex {
      align-items: center;
    }
  }
}
   .fourSeries-b {
      height: 40vh;}

</style>

子界面fourbar

<template>
  <div class="fourbar" ref="fourbar"></div>
</template>
<script>
export default {
  props: {
    data: Object,
    color:Array,
    dem:String
  },
  data() {
    return {};
  },

  mounted() {
    this.$nextTick(() => {
      this.drawLine();
    });
  },
  watch: {
    data: function (newVal, oldVal) {
      this.$nextTick(() => {
        this.drawLine();
      });
    },
  },

  methods: {
    drawLine() {
      let myChart = this.$echarts.init(this.$refs.fourbar);
      
      var option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          legend: {
              top: '5%',
              data: ['可回收垃圾', '厨余垃圾', '有害垃圾','其他垃圾'],
              textStyle: {
                color: '#fff',
                fontSize:'16'
              },
          },
          grid: {
              top:'20%',
              left:'5%',
              right:'5%',
              botton:'5%'
          },
          xAxis: {
              type: 'category',
              data: ['01', '02', '03', '04', '05','06','07','08','09','10','11','12'],
              axisLabel: {
                color: "#fff",
                fontSize: "14px"
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.15)",
                  // width: 1 //这里是坐标轴的宽度
                }
              },
          },
          yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.15)",
                  // width: 1 //这里是坐标轴的宽度
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.15)",
                  // width: 2
                }
              },
              axisLabel: {
                color: "#fff",
                fontSize: "14px"
              },
          },
          dataZoom: [{
              type: 'slider',
              show: true,
              xAxisIndex: [0],
              left: '0',
              bottom: -5,
              start: 0,
              end:40, //初始化滚动条
              height:14,
              borderColor: "rgba(255, 255, 255, 0.6);",
              fillerColor: '#00C283',
              // backgroundColor: 'rgba(255, 255, 255, 0.6);',//两边未选中的滑动条区域的颜色
              showDataShadow: false,//是否显示数据阴影 默认auto
              showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
              realtime:true, //是否实时更新
              filterMode: 'filter',
          }],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function(parma) {
              let str = '2021-' +  parma[0].name + '</br>'
              str = str +  "<span style='color: #2189D9;margin-right:45px;'>可回收</span><span>" + parma[0].data + "吨</span></br>"
              str = str +  "<span style='color: #13D998;margin-right:30px;'>厨余垃圾</span><span>" + parma[1].data + "吨</span></br>"
              str = str +  "<span style='color: #C3322A;margin-right:30px;'>有害垃圾</span><span>" + parma[2].data + "吨</span></br>"
              str = str +  "<span style='color: #D98828;margin-right:30px;'>其他垃圾</span><span>" + parma[3].data + "吨</span></br>"
          
              return str
            }
          },
          series: [{
              name: '可回收垃圾',
              data: [70, 65, 45, 80, 70, 78, 14,20,19,23,15,10],
              type: 'bar',
              barWidth:10,
              itemStyle: {
                  color:this.color[0]
              }

          },
          {
              name: '厨余垃圾',
              data: [70, 65, 45, 80, 70, 78, 14,20,19,23,15,10],
              type: 'bar',
              barWidth:10,
              itemStyle: {
                  color:this.color[1]
              }
          },
          {
              name: '有害垃圾',
              data: [,20,19,23,15,10,70, 65, 45, 80, 70, 78, 14],
              type: 'bar',
              barWidth:10,
              itemStyle: {
                  color:this.color[2]
              }
          },{
              name: '其他垃圾',
              data: [70, 65, 45, 80, 70, 78, 14,20,19,23,15,10],
              type: 'bar',
              barWidth:10,
              itemStyle: {
                  color:this.color[3]
              }
          }]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      
    },
  },
};
</script>
<style lang="scss" scoped>
.fourbar {
  width: 100%;
  height: 100%;
}
</style>

 子界面fourline

<template>
  <div class="fourline" ref="fourline"></div>
</template>
<script>
export default {
  props: {
    data: Object,
    color:Array,
    dem:String
  },
  data() {
    return {};
  },

  mounted() {
    this.$nextTick(() => {
      this.drawLine();
    });
  },
  watch: {
    data: function (newVal, oldVal) {
      this.$nextTick(() => {
        this.drawLine();
      });
    },
  },

  methods: {
    drawLine() {
      let myChart = this.$echarts.init(this.$refs.fourline);

      var option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          legend: {
              top: '5%',
              data: ['可回收垃圾', '厨余垃圾', '有害垃圾','其他垃圾'],
              textStyle: {
                color: '#fff',
                fontSize:'16'
              },
          },
          grid: {
              top:'20%',
              left:'5%',
              right:'5%',
              botton:'5%'
          },
          xAxis: {
              type: 'category',
              data: ['01', '02', '03', '04', '05','06','07','08','09','10','11','12'],
              axisLabel: {
                color: "#fff",
                fontSize: "14px"
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.15)",
                  // width: 1 //这里是坐标轴的宽度
                }
              },
          },
          yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.15)",
                  // width: 1 //这里是坐标轴的宽度
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.15)",
                  // width: 2
                }
              },
              axisLabel: {
                color: "#fff",
                fontSize: "14px"
              },
          },
          dataZoom: [{
              type: 'slider',
              show: true,
              xAxisIndex: [0],
              left: '0',
              bottom: -5,
              start: 0,
              end:40, //初始化滚动条
              height:14,
              borderColor: "rgba(255, 255, 255, 0.6);",
              fillerColor: '#00C283',
              // backgroundColor: 'rgba(255, 255, 255, 0.6);',//两边未选中的滑动条区域的颜色
              showDataShadow: false,//是否显示数据阴影 默认auto
              showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
              realtime:true, //是否实时更新
              filterMode: 'filter',
          }],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function(parma) {
              let str = '2021-' +  parma[0].name + '</br>'
              str = str +  "<span style='color: #2189D9;margin-right:45px;'>可回收</span><span>" + parma[0].data + "吨</span></br>"
              str = str +  "<span style='color: #13D998;margin-right:30px;'>厨余垃圾</span><span>" + parma[1].data + "吨</span></br>"
              str = str +  "<span style='color: #C3322A;margin-right:30px;'>有害垃圾</span><span>" + parma[2].data + "吨</span></br>"
              str = str +  "<span style='color: #D98828;margin-right:30px;'>其他垃圾</span><span>" + parma[3].data + "吨</span></br>"
              return str
            }
          },
          series: [{
              name: '可回收垃圾',
              data: [10, 35, 25, 60, 30, 58, 34,60,29,53,25,50],
              type: 'line',
              symbolSize: 4,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  color: this.color[0],
                  shadowColor: 'rgba(93,241,255 ,0.7)',
                  shadowBlur: 10,
                },
              }

          },
          {
              name: '厨余垃圾',
              data: [10, 75, 25, 80, 70, 78, 14,20,19,23,15,10],
              type: 'line',
              symbolSize: 4,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  color: this.color[1],
                  shadowColor: 'rgba(93,241,255 ,0.7)',
                  shadowBlur: 10,
                },
              }
          },
          {
              name: '有害垃圾',
              data: [20,19,23,15,10,70, 65, 45, 80, 70, 78, 14],
              type: 'line',
              symbolSize: 4,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  color: this.color[2],
                  shadowColor: 'rgba(93,241,255 ,0.7)',
                  shadowBlur: 10,
                },
              }
          },{
              name: '其他垃圾',
              data: [70, 65, 45, 80, 70, 78, 14,20,19,23,15,10],
              type: 'line',
              symbolSize: 4,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  color: this.color[3],
                  shadowColor: 'rgba(93,241,255 ,0.7)',
                  shadowBlur: 10,
                },
              }
          }]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });

    },
  },
};
</script>
<style lang="scss" scoped>
.fourline {
  width: 100%;
  height: 100%;
}
</style>

实现效果

 

echart图形绘制
qq_25687271的博客
08-09 4835
1.绘制折线图 let myDom = document.querySelector(dom);//要放的元素 let myChart = echarts.init(myDom, 'light');//使用的主题 let option = { tooltip: { trigger: 'axis' }, legend: { data: ['人...
Echarts常见图表展示
懒羊羊我小弟的博客
07-31 2272
本文主要介绍Echarts常见图表的展示，主要以折线图、柱状图、饼图、散点图等
echart各种图形
weixin_30527143的博客
05-26 392
reference：http://echarts.baidu.com/examples/ develop:https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-mec528xa.html 转载于:https://www.cnblogs.com/cyany/p/9092960.html
echart图表合集
m0_57997609的博客
11-03 5238
echarts--------柱状图（x轴为两个模块数据版本，柱子顶部自定义背景图加自定义数据）最近做个项目运用大量echarts图表特此记录一下，以备后面不时之需！echarts-------仪表图（双指针 两个数据）echarts-------------横向进度条。echarts-----饼状图（颜色渐变）样式图片如下后续可根据自己需要按需修改。1，2，3 echarts图表代码。echarts--------水球图。echarts------环形图表。echarts-仪表速度图。
echarts多种图形使用
Smile_ping的博客
01-28 2392
echarts 图形使用分享，写得不好，请各位大神多多指教… 饼图 pie 折线图 line 柱形图 bar 根据条件（季度，月份）联动三种图形数据变化 折线图 “月份” 换行处理方法 柱状图 添加 “横向滚动条” 封装图形函数 使用指南 效果图1： 效果图2： 参数说明及数据格式 /** * 创建饼图js * data[0] 呈现饼图的dom元素i
echarts图形上绘制可以拖动的游标线
10-31
在本文中，我们将深入探讨如何使用ECharts JavaScript库在图形上绘制可以拖动的游标线。ECharts是一个由百度开发的开源数据可视化工具，它提供了丰富的图表类型和灵活的配置选项，使得开发者能够轻松创建交互式的...
python端口扫描+漏洞扫描 +echarts图形可视化
09-03
【Echarts图形可视化】 Echarts是中国百度公司推出的一个开源JavaScript图表库，它提供丰富的可视化图表类型，如柱状图、折线图、饼图等，并支持动态数据交互和高度自定义。在Python中，我们可以结合Flask、Django...
echarts 图形数据调用 html 调用案例
08-24
在这个"echarts 图形数据调用 html 调用案例"中，我们将探讨如何将 ECharts 集成到 HTML 页面中，以实现动态数据的图形化展示。 首先，我们需要在 HTML 文件中引入 ECharts 的库文件。在"echarts-4.1.0-release...
百度Echarts图形统计
01-09
ZRender为ECharts提供了高效的图形绘制能力，包括矢量图形的绘制和操作，如图形的绘制、变换、动画等，确保了ECharts在大数据量下的高性能表现。 **ECharts的主要特性** 1. **丰富的图表类型**：ECharts支持线图、...
echarts 图形化插件
12-18
用于前端开发 需要用到图形化界面，各种图形。只需要传入相应的json格式，图形化自动形成
Echarts 图形实例（柱图，饼图，曲线图等）
11-24
史上最强大的js图表库——ECharts，免费的图标控件，运行速度流畅，画面美观。
Echarts实现图形报表
04-26
java+mysql实现图形报表，附带数据库代码。用servlet实现
一些echarts的基本图形
weixin_30384217的博客
03-14 292
先拿一个图形渲染过程举例 引用处 <bar ref="ARPUChart" v-if="ARPUChart" style="width:500px;height:300px;"> </bar> import bar from '../base/ChartBar.vue' 获取数据 //ARPU达成情况 async ARP...
echarts最常绘制的图形
qq_41687299的博客
05-17 1369
1、绘制地图 以下两个demo的地址: https://gitee.com/lili123321/echarts-demo 1）2D地图 推荐文章： https://www.jianshu.com/p/7337c2f56876 （echarts搞定各种地图） https://www.yuque.com/baixiangguomi/ld4lrh/tpf3cx（结合高德api、echarts绘制可下钻的地图） https://blog.youkuaiyun.com/baalhuo/artic...
Echart基本的图形配置及制作
weixin_42498482的博客
06-05 609
1.引入echarts · 直接html引入 src · ES引入 import echarts from node_module/echarts/echarts · 普通引入 var echarts = require(“echarts”); 2. js配置部分 1. Echarts初始化并绑定容器 var echarts = Echarts.init(document.getElementById('main')); 2. option配置项 var option = {
echart图形设计
十年呵护的专栏
11-11 636
1.柱形图设计 option= { color: ['#00AEFF','#00699A','#fed61c'], backgroundColor: '#2A456B',//背景色 tooltip : { trigger: 'axis', axisPointe...
echarts绘图
博风_刺耳的博客
08-25 1131
饼状图： http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts 柱状图： http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts...
绘制echarts基础图形
xjiet的博客
11-27 598
特殊配置项即该图形特有的一些配置选项，我们选择一些常用的进行讲解。特殊配置项即该图形特有的一些配置选项，我们选择一些常用的进行讲解。特殊配置项即该图形特有的一些配置选项，我们选择一些常用的进行讲解。特殊配置项即该图形特有的一些配置选项，我们选择一些常用的进行讲解。series.emphasis: 指定高亮状态下的样式。
Echarts常用图形绘制
xsp123456789_的博客
03-18 504
xlsx”数据，绘制饼图和环形图分析会员入会渠道分析。
vue echarts 图形组件
最新发布
12-26
Vue ECharts 图形组件是一个将ECharts图表库与Vue.js框架结合的轻量级插件。ECharts本身是一个强大的数据可视化库，而Vue ECharts允许你在Vue应用中更方便地创建、配置和渲染各种图表，如折线图、柱状图、饼图等。它通过组件化的思想，让你可以像使用其他Vue组件一样声明式地定义图表，提供props接收配置项，响应式的更新和生命周期钩子等功能。使用这个组件，你可以更容易地管理数据变化对图表的影响，并且保持代码结构清晰。 要使用Vue ECharts，首先需要安装相关依赖，然后在Vue模板中导入并注册组件，配置图表的数据源和选项，最后实例化并挂载到DOM上。这里有一个简单的示例： ```html <template> <div> <vue-echarts :options="chartOptions" /> </div> </template> <script> import { ECharts } from 'vue-echarts'; export default { components: { VueEcharts: ECharts, }, data() { return { chartOptions: { // 这里设置图表的基本配置和数据 series: [{ type: 'line', data: [...] }], }, }; }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值