echars地图/饼图/柱图/折线图的配置

最新推荐文章于 2021-03-16 17:34:28 发布
最新推荐文章于 2021-03-16 17:34:28 发布
阅读量164 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48691904/article/details/106852147
版权 
<template>
  <div class="povertyProgress">
    <div class="header">
      <div class="title">进度</div>
      <div class="back">
        <i class="mintui mintui-back"></i>
      </div>
    </div>
    <div class="povertyProgressWrap">
      <div class="povertyProgressContent">
        <div class="middleWrap">
          <div class="timeWrap">时间终止：2020年5月30日</div>
          <div class="topWrap">
            <div class="topItem">
              <div class="bgWrap">
                <div class="numWrap">
                  <span class="num">1532</span>
                  <span class="danwei">个</span>
                </div>
                <div class="imgWrap">
                  <img src=".././../assets/pkx.png" alt />
                  <span class="nameWrap">贫困县</span>
                </div>
              </div>
            </div>
            <div class="topItem">
              <div class="bgWrap">
                <div class="numWrap">
                  <span class="num">19223</span>
                  <span class="danwei">家</span>
                </div>
                <div class="imgWrap">
                  <img src=".././../assets/gys.png" alt />
                  <span class="nameWrap">供应商</span>
                </div>
              </div>
            </div>
            <div class="topItem">
              <div class="bgWrap">
                <div class="numWrap">
                  <span class="num">52190</span>
                  <span class="danwei">件</span>
                </div>
                <div class="imgWrap">
                  <img src=".././../assets/fpcp.png" alt />
                  <span class="nameWrap">扶贫产品</span>
                </div>
              </div>
            </div>
            <div class="topItem">
              <div class="bgWrap">
                <div class="numWrap">
                  <span class="num">4607</span>
                  <span class="danwei">亿元</span>
                </div>
                <div class="imgWrap">
                  <img src=".././../assets/cpjzl.png" alt />
                  <span class="nameWrap">产品价值量</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="titleEchart">各地供应商和产品</div>
        <div class="mapChinaWrap">
          <div id="mapWrap"></div>
          <div class="mapText">根据各地认证供应商、产品数量分层级按颜色展示：</div>
          <div class="mapIconWrap">
            <div class="mapIcon">
              <div class="iconColor1"></div>
              <div class="iconText">1-2名</div>
            </div>
            <div class="mapIcon">
              <div class="iconColor2"></div>
              <div class="iconText">3-4名</div>
            </div>
            <div class="mapIcon">
              <div class="iconColor3"></div>
              <div class="iconText">5-10名</div>
            </div>
            <div class="mapIcon">
              <div class="iconColor4"></div>
              <div class="iconText">其他</div>
            </div>
          </div>
        </div>
        <div class="titleEchart">销售最热top5的产品柱状图</div>
        <div class="topBarWrap">
          <div id="barWrap"></div>
        </div>
        <div class="titleEchart">重点产品销售分析</div>
        <div class="topLineWrap">
          <div id="lineWrap"></div>
        </div>
        <div class="titleEchart">各品类销售占比</div>
        <div class="topPieWrap">
          <div id="pieWrap"></div>
        </div>
        <div class="titleEchart">TOP10企业采购额度排序表</div>
        <div class="topBar2Wrap">
          <div id="bar2Wrap"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { } from '@/api'
import echarts from "echarts"
import "../../../node_modules/echarts/map/js/china.js";
export default {
  name: 'povertyProgress',
  components: {},
  data () {
    return {}
  },
  mounted () {
    this.mapinit()
    this.barInit()
    this.lineInit()
    this.pieInit()
    this.bar2Init()
    window.addEventListener("resize", () => {
      this.mapChart.resize();
      this.barChart.resize();
      this.bar2Chart.resize();
      this.lineChart.resize();
      this.pieChart.resize();
    });
  },
  activated () {
  },
  methods: {
    goBack () {
      this.$router.back()
    },
    mapinit () {
      this.mapChart = echarts.init(document.getElementById("mapWrap"));
      let option = {
        series: [
          {
            type: "map",
            map: "china",
            itemStyle: {
              borderColor: "#fff"
            },
            data: [
              { name: '北京', value: 11, itemStyle: { normal: { areaColor: '#4189ED', } } },
              { name: '天津', value: 22, itemStyle: { normal: { areaColor: ' #18A1B6', } } },
              { name: '河北', value: 33, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '辽宁', value: 44, itemStyle: { normal: { areaColor: '#18A1B6', } } },
              { name: '黑龙江', value: 55, itemStyle: { normal: { areaColor: '#18A1B6', } } },
              { name: '吉林', value: 66, itemStyle: { normal: { areaColor: '#18A1B6', } } },
              { name: '内蒙古', value: 77, itemStyle: { normal: { areaColor: '#18A1B6', } } },
              { name: '山西', value: 88, itemStyle: { normal: { areaColor: '#18A1B6', } } },
              { name: '山东', value: 99, itemStyle: { normal: { areaColor: '#E23A58', } } },
              { name: '新疆', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '河南', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '江苏', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '甘肃', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '西藏', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '青海', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '宁夏', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '陕西', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '四川', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '江苏', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '云南', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '安徽', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '湖北', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '重庆', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '贵州', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '湖南', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '江西', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '浙江', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '广西', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '海南', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '广东', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '福建', value: 9, itemStyle: { normal: { areaColor: '#F8AC2C', } } },
              { name: '台湾', value: 9, itemStyle: { normal: { areaColor: '#4189ED', } } },
              { name: '香港', value: 9, itemStyle: { normal: { areaColor: '#4189ED', } } },
              { name: '澳门', value: 9, itemStyle: { normal: { areaColor: '#4189ED', } } },
              { name: '南海诸岛', value: 99, itemStyle: { normal: { opacity: 0, label: { show: false } } } },
            ]
          }
        ]
      }
      this.mapChart.setOption(option);
    },
    barInit () {
      this.barChart = echarts.init(document.getElementById("barWrap"));
      let option = {
        tooltip: {
          show: false
        },
        grid: {
          top: "15%",
          left: '5%',
          right: '10%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: [
          {

            type: 'category',
            data: ['五常大米', '西藏耗牛肉', '新疆哈密瓜', '烟台苹果', '赣南脐橙',],
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              rotate: -40,
              color: "#969696",
              align: "center",
              margin: 30,
            },
            axisLine: {
              lineStyle: {
                color: "999"
              }
            }
          }
        ],
        yAxis: [
          {
            name: "销售额(万元)",
            nameTextStyle: {
              color: "#999",
            },
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#999",
            }
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '30%',
            data: [100, 52, 200, 334, 390],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#DC1A00' },
                  { offset: 1, color: '#FE705E' }
                ]
              )
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#F8AC2C' },
                    { offset: 1, color: '#E23A58' }
                  ]
                )
              }
            },

          }
        ]
      }
      this.barChart.setOption(option);
    },
    bar2Init () {
      this.bar2Chart = echarts.init(document.getElementById("bar2Wrap"));
      let option = {
        tooltip: {
          show: false
        },
        grid: {
          top: "15%",
          left: '5%',
          right: '10%',
          bottom: '6%',
          containLabel: true
        },
        yAxis: [
          {

            type: 'category',
            data: ['五常大米', '西藏耗牛肉', '新疆哈密瓜', '烟台苹果', '赣南脐橙',],
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              rotate: -40,
              color: "#999",
              align: "center",
              margin: 30,
            },
            axisLine: {
              lineStyle: {
                color: "999"
              }
            }
          }
        ],
        xAxis: [
          {
            nameTextStyle: {
              color: "#999",
            },
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#999",
            }
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '30%',
            data: [100, 52, 200, 334, 390],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 1, 0,
                [
                  { offset: 0, color: '#FE705E' },
                  { offset: 1, color: '#DC1A00' }
                ]
              )
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 1, 0,
                  [
                    { offset: 0, color: '#F8AC2C' },
                    { offset: 1, color: '#E23A58' }
                  ]
                )
              }
            },

          }
        ]
      }
      this.bar2Chart.setOption(option);
    },
    lineInit () {
      this.lineChart = echarts.init(document.getElementById("lineWrap"));
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        color: ['#73A0FA', '#73DEB3', '#7585A2', '#F7C739', '#EB7E65', '#83D0EF'],
        legend: {
          bottom: 10,
          data: ['核桃', '大枣', '耗牛', '青稞', '奶粉'],
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: '#999'
          }
        },
        grid: {
          top: "15%",
          left: '5%',
          right: '8%',
          bottom: '12%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: "999"
            }
          },
          axisTick: { alignWithLabel: true },

          axisLabel: {
            interval: 0,
            rotate: -40,
            color: "#999",
            align: "center",
            margin: 30,
          },

          data: ['2019.01.01', '2019.02.01', '2019.01.02', '2019.01.03', '2019.01.04']
        },
        yAxis: {
          type: 'value',
          name: "销售额(万元)",
          nameTextStyle: {
            color: "#999",
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#999",
          }
        },
        series: [
          {
            name: '核桃',
            type: 'line',
            symbol: 'none',
            smooth: true,
            data: [332, 102, 101, 134, 90,]
          },
          {
            name: '大枣',
            symbol: 'none',
            type: 'line',
            smooth: true,
            data: [182, 372, 191, 234, 290,]
          },
          {
            name: '耗牛',
            symbol: 'none',
            type: 'line',
            smooth: true,
            data: [150, 132, 281, 154, 190,]
          },
          {
            name: '青稞',
            symbol: 'none',
            type: 'line',
            smooth: true,
            data: [10, 32, 181, 54, 290,]
          },
          {
            name: '奶粉',
            symbol: 'none',
            type: 'line',
            smooth: true,
            data: [15, 132, 81, 15, 90,]
          },

        ]
      }
      this.lineChart.setOption(option);
    },
    pieInit () {
      this.pieChart = echarts.init(document.getElementById("pieWrap"));
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        color: ['#73A0FA', '#73DEB3', '#7585A2', '#F7C739', '#EB7E65', '#83D0EF'],
        legend: [{
          x: "15%",
          y: "80%",
          icon: "circle",
          data: ['厨房调料'],// '粮油副食', '新鲜水果', '畜禽肉蛋', '衣服加工', '冲调饮料'],
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 20,
          textStyle: {
            color: '#999'          }

        },
        {
          x: "40%",
          y: "80%",
          icon: "circle",
          data: ['粮油副食'],// '粮油副食', '新鲜水果', '畜禽肉蛋', '衣服加工', '冲调饮料'],
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 20,
          textStyle: {
            color: '#999'
          }
        },
        {
          x: "65%",
          y: "80%",
          icon: "circle",
          data: ['新鲜水果'],// '粮油副食', '新鲜水果', '畜禽肉蛋', '衣服加工', '冲调饮料'],
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 20,
          textStyle: {
            color: '#999'
          }
        },
        {
          x: "15%",
          y: "87%",
          icon: "circle",
          data: ['畜禽肉蛋'],// '粮油副食', '新鲜水果', '畜禽肉蛋', '衣服加工', '冲调饮料'],
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 20,
          textStyle: {
            color: '#999'
          }
        },
        {
          x: "40%",
          y: "87%",
          icon: "circle",
          data: ['衣服加工'],// '粮油副食', '新鲜水果', '畜禽肉蛋', '衣服加工', '冲调饮料'],
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 20,
          textStyle: {
            color: '#999'
          }
        },

        {
          x: "65%",
          y: "87%",
          icon: "circle",
          data: ['冲调饮料'],// '粮油副食', '新鲜水果', '畜禽肉蛋', '衣服加工', '冲调饮料'],
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 20,
          textStyle: {
            color: '#999'
          }
        },
        ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['32%', '48%'],
            center: ['50%', '40%'],
            data: [
              { value: 335, name: '厨房调料' },
              { value: 310, name: '粮油副食' },
              { value: 234, name: '新鲜水果' },
              { value: 235, name: '畜禽肉蛋' },
              { value: 148, name: '衣服加工' },
              { value: 348, name: '冲调饮料' }
            ],
            label: {
              height: '28',
              fontSize: '12',
              color: "#999",
              formatter (params) {
                console.log(params)
                return params.name + '\n' + params.value
              }
            },
            labelLine: {
              lineStyle: { color: "#999" }
            },
            itemStyle: { // 此配置
              normal: {
                borderWidth: 1,
                borderColor: '#ffffff',
              },
            }
          }
        ]
      }
      this.pieChart.setOption(option);
    }
  }
}
</script>
<style lang="less" scoped>
.povertyProgress {
  width: 100%;
  height: 100%;
  .header {
    width: 100%;
    height: 0.8rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    background: @bgThemeColor;
    .back {
      width: 0.4rem;
      height: 0.8rem;
      margin-left: 0.4rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .mintui-back {
        color: #fff;
        font-size: 0.4rem;
      }
    }
    .title {
      color: #fff;
      font-size: @titleSize;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: @bgThemeColor;
    }
  }
  .povertyProgressWrap {
    width: 100%;
    width: 100%;
    position: absolute;
    top: 0.8rem;
    left: 0;
    bottom: 0;
    .povertyProgressContent {
      width: 100%;
      height: 100%;
      overflow: scroll;
      -webkit-overflow-scrolling: touch;
      touch-action: auto;
      position: static;
      background: #f7f8fa;
      padding-bottom: 0.4rem;
      .middleWrap {
        position: relative;
        background: linear-gradient(
          to bottom,
          @bgThemeColor 0%,
          @bgLinearColor 75%,
          #f7f8fa 75%,
          #f7f8fa 100%
        );

        .timeWrap {
          width: 100%;
          height: 0.8rem;
          color: #fff;
          font-size: 0.24rem;
          background-color: @bgThemeColor;
          padding-right: 0.3rem;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
        .topWrap {
          width: 100%;
          height: 4rem;
          padding: 0 0.4rem;
          display: flex;
          flex-wrap: wrap;
          .topItem {
            width: 3.2rem;
            height: 1.6rem;
            background-color: #fff;
            margin-bottom: 0.3rem;
            border-radius: 0.04rem;
            box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03);
            .bgWrap {
              width: 2.72rem;
              height: 1.36rem;
              background: rgba(255, 255, 255, 0.26);
              border-radius: 4px;
              box-shadow: 0px 20px 20px 0px rgba(9, 77, 173, 0.04);
              margin-top: 0.34rem;
              margin-left: 0.24rem;
              .numWrap {
                width: 100%;
                opacity: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                line-height: 0.58rem;
                text-align: center;
                .num {
                  color: #333;
                  font-size: 0.48rem;
                  font-weight: bold;
                }
                .danwei {
                  color: #333;
                  font-size: 0.28rem;
                }
              }
              .imgWrap {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 0.4rem;
                img {
                  width: 0.28rem;
                  height: 0.28rem;
                  margin-right: 0.1rem;
                }
                .nameWrap {
                  color: #333;
                  font-size: 0.26rem;
                }
              }
            }
          }
          .topItem:nth-child(2n + 1) {
            margin-right: 0.3rem;
          }
        }
      }
      .titleEchart {
        width: 100%;
        height: 1rem;
        margin-top: 0.2rem;
        font-size: 0.4rem;
        font-weight: 500;
        color: rgba(47, 47, 47, 1);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 0.3rem;
      }
      .mapChinaWrap {
        width: 6.9rem;
        height: 7rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03);
        margin: auto;
        overflow: hidden;
        #mapWrap {
          width: 10rem;
          height: 6rem;
          transform: translate(-1.5rem, 0);
        }
      }
      .mapText {
        width: 100%;
        color: #333;
        font-size: 0.24rem;
        margin-left: 0.2rem;
      }
      .mapIconWrap {
        width: 100%;
        padding: 0 0.3rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #292929;
        font-size: 0.24rem;
        margin-top: 0.18rem;
        .mapIcon {
          width: 25%;
          height: 0.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .iconColor1 {
            width: 0.2rem;
            height: 0.2rem;
            background-color: #e23a58;
          }
          .iconColor2 {
            width: 0.2rem;
            height: 0.2rem;
            background-color: #f8ac2c;
          }
          .iconColor3 {
            width: 0.2rem;
            height: 0.2rem;
            background-color: #18a1b6;
          }
          .iconColor4 {
            width: 0.2rem;
            height: 0.2rem;
            background-color: #4189ed;
          }
          .iconText {
            height: 0.45rem;
            text-align: center;
            line-height: 0.45rem;
            margin-left: 0.1rem;
          }
        }
      }
      .topBarWrap {
        width: 6.9rem;
        height: 5.4rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03);
        margin: auto;
        #barWrap {
          width: 6.9rem;
          height: 5.4rem;
        }
      }
      .topLineWrap {
        width: 6.9rem;
        height: 6.5rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03);
        margin: auto;
        #lineWrap {
          width: 6.9rem;
          height: 6.5rem;
        }
      }
      .topPieWrap {
        width: 6.9rem;
        height: 7rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03);
        margin: auto;
        #pieWrap {
          width: 6.9rem;
          height: 7.3rem;
        }
      }
      .topBar2Wrap {
        width: 6.9rem;
        height: 5.4rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03);
        margin: auto;
        #bar2Wrap {
          width: 6.9rem;
          height: 5.4rem;
        }
      }
    }
  }
}
</style>

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

木槿*^_^*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax动态赋值echarts（饼图和柱形图）
yangsitong1314的博客
08-09 3万+
本文以柱形图和饼形图ajax动态赋值为例 一、饼形图赋值步骤 （1）jsp页面 （2）js页面 //饼图模板 var dom = document.getElementById("first"); var myChart = echarts.init(dom); var app = {}; option = null; option = {
饼图、柱形图、堆积柱、折线图、散点图，到底应该怎么选？
qq_42963448的博客
11-16 957
数据可视化分析图形选择指南，手把手教你玩转数据分析！
Echarts 柱形图最全详解
热门推荐
PinkCoder
04-15 14万+
Echarts 柱形图
数据可视化：基本图表
闲云孤鹤
11-29 3280
本文转载至：http://www.ruanyifeng.com/blog/2014/11/basic-charts.html 作者： 阮一峰 "数据可视化"可以帮助用户理解数据，一直是热门方向。 图表是"数据可视化"的常用手段，其中又以基本图表----柱状图、折线图、饼图等等----最为常用。 用户非常熟悉这些图表，但如果被问道，它们的特点是什么，最适用怎样
Echarts-柱状图柱图宽度设置
hong2511的博客
07-22 11万+
先看两张图 图中柱图只需要设置series中的坐标系属性barWidth就可以， 这种图柱状图，折叠柱状图都适应 eg： /** * 堆积柱状图 * @param xaxisdata x轴：标签
大屏演示 echarts 地图 数据 可视化.zip
04-20
3. **丰富图表类型**：包括但不限于折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、treemap、旭日图、平行坐标、漏斗图、仪表盘等，以及三维可视化组件（通过 ECharts GL 扩展）。...
开源可视化图表库ECharts的使用示例项目（Vue2.x+Axios+ECharts）
10-20
（2）了解和使用ECharts柱状图、折线图、饼图、漏斗图、雷达图和仪表盘； （3）了解和使用ECharts地图和3D地图； （4）利用ECharts API实现图表自适应、图表联动和图表钻取等场景。 4.阅读建议：各内容点的详细介绍...
ECharts介绍123 (2).zip
04-10
echarts.ECharts是一个由百度团队开发的，基于JavaScript的开源数据...它提供了丰富的图表类型和交互能力，使用户能够通过简单的配置生成各种各样的图表，包括但不限于折线图、柱状图、散点图、饼图、雷达图、地图等
echarts开发文档
01-08
ECharts 提供了多种图表类型，包括折线图、柱形图、散点图、气泡图、K 线图、饼图、雷达图、力导布局图、地图等。 引入方式 ECharts 提供了多种引入方式，包括模块化包引入和单文件引入。模块化包引入适合熟悉模块...
图数据可视化.zip
04-20
3. **丰富图表类型**：包括但不限于折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、treemap、旭日图、平行坐标、漏斗图、仪表盘等，以及三维可视化组件（通过 ECharts GL 扩展）。...
echarts象形柱图 pictorialBar
zm_miner的博客
05-05 1万+
项目需求 这种属于series-> type的类型是pictorialBar 很多怪形的柱形图都是使用它, 只需要修改series -> symbol的值就可以, 在这里他的类型值是'react' 我建议可以复制我这段代码 自己跑一下 <!DOCTYPE html> <html lang="en"> <head> <meta char...
Echart 走势图随浏览器大小缩放
Brook
12-23 4437
ECharts                             // 路径配置         require.config({             paths: {                 echarts: 'http://echarts.baidu.com/build/dist'             }         });
Echarts柱状图
~~
03-16 2万+
图1： <template> <div id="chartBar" style="width: 700px; height: 300px"></div> </template> <script> import echarts from "echarts"; export default { data() { return { chartBar: null, category: [
echars水状_ECharts阴影设置
weixin_42516387的博客
02-23 799
title.shadowBlur | number图形阴影的模糊大小。该属性配合shadowColor,shadowOffsetX,shadowOffsetY一起设置图形的阴影效果。示例：{shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10}注意：此配置项生效的前提是，设置了show: true以及值不为tranparent的背景...
Echarts 柱形图详解
杨雪枫的博客
06-12 7332
Echarts 柱形图 echarts百度针对数据报表等展现的一个产品，具体了解看官方网站：Echarts官网，在这个官网中有详细教程以及API，很容易入手Echarts，从个人刚学习Echarts图表来看，它的难度在于它有自己的一套属性，这和我们平时用的css是不同的，因而我们需要什么效果就得去遵守它的属性，去识别图表的各个部分的专业名称，才能从它API中获取相应属性去实现你想要效果 下面从实现...
综合集团数字化转型顶层设计思路.pptx
06-14
综合集团数字化转型顶层设计思路.pptx
学生成绩管理系统(SSH+MYSQL)130221
06-14
学生成绩管理系统(SSH+MYSQL)130221
【工具模型】37个OD方法工具盘点.pptx
06-14
【工具模型】37个OD方法工具盘点.pptx
毕设项目：基于bootstrap+PHP+MySQL的个人博客系统（源码+数据库）.zip
最新发布
06-14
该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
echarts流光折线图、3d柱状图、3d饼图、3d地图
07-27
对于流光折线图、3D柱状图、3D饼图和3D地图，具体的图表配置项可以参考 ECharts 官方文档，并根据自己的需求进行相应的配置。 注意：为了能够使用 3D 图表，需要确保引入的 ECharts 版本支持 3D 功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值