Echarts绘图

最新推荐文章于 2024-04-17 19:46:42 发布
最新推荐文章于 2024-04-17 19:46:42 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： Echarts 功能 文章标签： 前端 echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MoXinXueWEB/article/details/124210807
版权

Echarts绘图

本想记录点什么，但是个人觉得Echarts官网写的很详细，这里就记录一个页面吧。

页面显示效果如下：在这里插入图片描述## 静态页面代码：

<template>
  <div class="content">
    <div class="top">
      <div class="left_box">2021年09月21日 星期二</div>
      <div class="center_box">领导驾驶舱</div>
      <div class="right_box">评分更新时间：2021-12-31</div>
    </div>
    <div class="c_box">
      <div class="box_li">
        <div class="li_title">信用优（户）</div>
        <div class="li_number">2130</div>
        <div class="li_text"><span>今日新增</span><span>50</span><span class="upArrow"></span></div>
        <div
          class="li_chart"
          id="li_chart1"
        ></div>
      </div>
      <div class="box_li">
        <div class="li_title">信用良（户）</div>
        <div class="li_number">8806</div>
        <div class="li_text"><span>今日新增</span><span>150</span><span class="upArrow"></span></div>
        <div
          class="li_chart"
          id="li_chart2"
        ></div>
      </div>
      <div class="box_li">
        <div class="li_title">信用中（户）</div>
        <div class="li_number">8806</div>
        <div class="li_text"><span>今日减少</span><span>150</span><span class="downArrow"></span></div>
        <div
          class="li_chart"
          id="li_chart3"
        ></div>
      </div>
      <div class="box_li">
        <div class="li_title">信用差（户）</div>
        <div class="li_number">8806</div>
        <div class="li_text"><span>今日减少</span><span>150</span><span class="downArrow"></span></div>
        <div
          class="li_chart"
          id="li_chart4"
        ></div>
      </div>
      <div class="box_li">
        <div
          class="chart_right"
          id="chart1"
          style="width: 100%; height: 100%; position: relative; overflow: hidden;"
        >
          ></div>
      </div>
    </div>
    <div class="b_box">
      <div class="leftBox">
        <div class="title_box">所属行业平均得分</div>
        <div class="conlist_box">
          <div class="th_box">
            <div>排名</div>
            <div>行业名称</div>
            <div>指标分值</div>
          </div>
          <div
            class="td_box"
            v-for="(item,index) in listProgess"
            :key="index"
          >
            <div>{{index+1}}</div>
            <div>
              <div class="small_title">{{item.name}}</div>
              <div class="">
                <el-progress
                  :percentage="item.value"
                  :show-text="false"
                  stroke-width='4'
                  :color="item.color?item.color:'#ffd800'"
                ></el-progress>
              </div>
            </div>
            <div>{{item.number}}</div>
          </div>
        </div>
      </div>
      <div class="centerBox">
        <div class="centerTop">
          <div class="title_box">所属行业平均得分</div>
          <div
            class="echart_box"
            id="echart2"
          ></div>
        </div>
        <div class="centerBottom">
          <div class="centerBottombox">
            <div class="title_box">企业成立时间</div>
            <div
              class="echart_1"
              id="main1"
            ></div>
          </div>
          <div class="centerBottombox">
            <div class="title_box">企业缴存职工人数</div>
            <div
              class="echart_2"
              id="main2"
            ></div>
          </div>
        </div>
      </div>
      <div class="leftBox">
        <div class="title_box">所属经济平均得分</div>
        <div class="conlist_box">
          <div class="th_box">
            <div>排名</div>
            <div>行业名称</div>
            <div>指标分值</div>
          </div>
          <div
            class="td_box"
            v-for="(item,index) in listProgess"
            :key="index"
          >
            <div>{{index+1}}</div>
            <div>
              <div class="small_title">{{item.name}}</div>
              <div class="">
                <el-progress
                  :percentage="item.value"
                  :show-text="false"
                  stroke-width='4'
                ></el-progress>
              </div>
            </div>
            <div>{{item.number}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  name: "twentyfiveday",
  data() {
    return {
      //
      listProgess: [
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 },
        { name: "金融业", value: 20, number: 923 }
      ],
      chart1List: [
        { value: 1048, name: "优" },
        { value: 735, name: "良" },
        { value: 580, name: "中" },
        { value: 484, name: "差" }
      ],
      main1List: [
        { value: 123, name: "1-3年" },
        { value: 62, name: "3-5年" },
        { value: 102, name: "5-10年" },
        { value: 34, name: "10年以上" }
      ],
      main2List: [
        { value: 122, name: "0-99人" },
        { value: 123, name: "100-499人" },
        { value: 123, name: "500-999人" },
        { value: 200, name: "1000-9999人" },
        { value: 200, name: "10000人以上" }
      ],
      //
      list1: [820, 932, 901, 934, 129, 133, 192, 340, 129, 130, 192, 340, 123],
      list2: [82, 93, 201, 934, 1290, 130, 19, 340, 120, 130, 193, 340, 123]
    };
  },
  methods: {
    //画饼图
    chart_write(elemete, list) {
      const that = this;
      let myChart = echarts.init(document.getElementById(elemete));
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          itemGap: 15,
          top: "center",
          right: "5%",
          orient: "vertical",
          width: "50%",
          icon: "circle",
          formatter: function(name) {
            let itfind = list.find(item => item.name == name);
            let sum = that.getSum(list, "value");
            return `${name} ${((itfind.value / sum) * 100).toFixed(2)}%`;
          },
          textStyle: {
            color: "#fff",
            fontSize: 14
          }
        },
        series: [
          {
            name: "用户数及占比",
            type: "pie",
            center: ["60%", "50%"],
            radius: ["40%", "70%"],
            avoidLabelOverlap: true,
            width: "50%",
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: false,
                formatter: "{d}",
                fontSize: 20,
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: list
          }
        ]
      };
      myChart.setOption(option);
    },
    //获取数组对象中某个对象的和
    getSum(arr, key) {
      return arr.reduce((prev, curr) => {
        return prev + curr[key];
      }, 0);
    },
    //画中间的变化曲线图
    echart2_write() {
      let myChart = echarts.init(document.getElementById("echart2"));
      let option = {
        legend: {
          lineStyle: {
            color: "#fff"
          }
        },
        grid: {
          show: false
        },
        xAxis: {
          type: "category",
          name: "分数",
          boundaryGap: false,
          data: [
            300,
            350,
            400,
            450,
            500,
            550,
            600,
            650,
            700,
            750,
            800,
            850,
            900,
            950,
            1000
          ]
        },
        yAxis: {
          type: "value",
          name: "企业数",
          alignTicks: true,
          splitLine: {
            lineStyle: {
              with: 0.5,
              color: ["#ccc"],
              opacity: 0.1
            }
          },
          axisLine: {
            show: true
          },
          axisTick: {
            show: true
          }
        },
        series: [
          {
            data: [
              820,
              932,
              901,
              934,
              1290,
              1330,
              1320,
              340,
              932,
              901,
              934,
              1290,
              1330,
              1320
            ],
            type: "line",
            symbol: "none",
            areaStyle: {
              opacity: 0.1
            },
            lineStyle: {
              color: "rgba(234, 118, 71, 1)",
              width: 1
            },
            itemStyle: {
              opacity: 0
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    //画顶部的变化曲线图
    echartLi_write(ele, color, list) {
      let myChart = echarts.init(document.getElementById(ele));
      let option = {
        legend: {
          lineStyle: {
            color: "#fff"
          }
        },
        grid: {
          show: false,
          top: "10%",
          bottom: "10%",
          left: "10%",
          right: "10%"
        },
        xAxis: {
          type: "category",
          show: false,
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        },
        yAxis: {
          type: "value",
          alignTicks: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            data: list,
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: color,
              width: 1
            },
            itemStyle: {
              opacity: 0
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  },
  mounted() {
    this.chart_write("chart1", this.chart1List);
    this.chart_write("main1", this.main1List);
    this.chart_write("main2", this.main2List);
    this.echartLi_write("li_chart1", "#5470c6", this.list1);
    this.echartLi_write("li_chart2", "#92cc76", this.list2);
    this.echartLi_write("li_chart3", "#fac858", this.list2);
    this.echartLi_write("li_chart4", "#ef6666", this.list2);
    this.echart2_write(this.chart1List);
  },
  created() {
    //
  }
};
</script>

样式代码（支持适屏）：

* {
  padding: 0;
  margin: 0;
}

html {
  font-size: 1vh;
}

.content {
  background: #010c43;
  width: 100vw;
  min-width: 1000px;
  padding-bottom: 20px;
  min-height: 100vh;
}

.top {
  height: 6.25rem;
  background: url('../img/echart/top.png') center center no-repeat;
  display: flex;
  justify-content: space-between;
  background-size: 100% 6.25rem;
  line-height: 6.25rem;
  margin: 0 1.25rem;
}
.left_box {
  font-family: PingFangSC-Regular;
  font-size: 1.5rem;
  color: #c8d4ff;
  letter-spacing: 0;
  line-height: 4rem;
}
.center_box {
  font-family: PingFangSC-Semibold;
  font-size: 3rem;
  background-image: -webkit-linear-gradient(
    bottom,
    rgba(236, 250, 243, 1),
    rgba(102, 140, 255, 1)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0;
}
.right_box {
  font-family: PingFangSC-Regular;
  font-size: 1.5rem;
  color: #c8d4ff;
  letter-spacing: 0;
  line-height: 4rem;
}

.c_box {
  display: flex;
  margin: 2rem 1.5rem;
  justify-content: space-between;
}

.box_li {
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 4px;
  height: 15rem;
  width: 19%;
  position: relative;
}
.li_title {
  font-family: PingFangSC-Medium;
  font-size: 1.86rem;
  color: #c8d4ff;
  letter-spacing: 0;
  position: absolute;
  top: 1.5rem;
  left: 3rem;
}
.li_number {
  font-family: Helvetica-Bold;
  font-size: 3.29rem;
  line-height: 4rem;
  color: #ffffff;
  letter-spacing: 0;
  position: absolute;
  top: 50%;
  margin-top: -2rem;
  left: 3rem;
}
.li_text {
  font-family: PingFangSC-Regular;
  font-size: 1rem;
  color: #c9cbce;
  letter-spacing: 0;
  position: absolute;
  left: 3rem;
  bottom: 2rem;
}
.li_chart {
  width: 50%;
  height: 6rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  margin-top: -3rem;
  background-image: linear-gradient(135deg, #092059 0%, #000f4a 100%);
}
.li_text span:nth-child(2) {
  font-family: DINAlternate-Bold;
  font-size: 1rem;
  color: #ffffff;
  letter-spacing: 0;
  margin-left: 1rem;
}
.li_text span.upArrow {
  background: url('../img/echart/upArrow.png') center center no-repeat;
  background-size: contain;
  background-size: contain;
  width: 2rem;
  height: 1.5rem;
  display: inline-block;
  position: absolute;
}
.li_text span.downArrow {
  background: url('../img/echart/downArrow.png') center center no-repeat;
  background-size: contain;
  width: 2rem;
  height: 1.5rem;
  display: inline-block;
  position: absolute;
}
.b_box {
  margin: 0 1.5rem;
  display: flex;
  justify-content: space-between;
}
.leftBox {
  width: 23.3%;
  height: 100%;
  background: #010c43;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 4px;
}
.title_box {
  font-family: PingFangSC-Medium;
  font-size: 1.5rem;
  height: 3.71rem;
  width: 100%;
  line-height: 3.71rem;
  color: #e7f1ff;
  letter-spacing: 0;
  background-image: linear-gradient(135deg, #092059 0%, #000f4a 100%);
  border-radius: 0.4rem 0.4rem 0 0;
  text-align: left;
  text-indent: 1.5rem;
}
.conlist_box {
  width: 100%;
  padding-top: 10px;
}
.th_box {
  width: 96%;
  background: #02296e;
  height: 2.86rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.th_box > div {
  font-family: PingFangSC-Regular;
  font-size: 1.14rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0;
}

.th_box > div:nth-child(1) {
  width: 15%;
  text-align: center;
  padding-left: 0.8rem;
}
.th_box > div:nth-child(2) {
  width: 65%;
  text-align: left;
}
.th_box > div:nth-child(3) {
  width: 20%;
  text-align: center;
  padding-right: 0.8rem;
  min-width: 65px;
}
.td_box {
  width: 96%;
  height: 6.5rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.td_box > div {
  font-family: PingFangSC-Regular;
  font-size: 1.14rem;
  color: #cee4ff;
  letter-spacing: 0;
}

.td_box > div:nth-child(1) {
  width: 15%;
  text-align: center;
  padding-left: 1rem;
}
.td_box > div:nth-child(2) {
  width: 65%;
  text-align: left;
}
.td_box > div:nth-child(3) {
  width: 20%;
  text-align: center;
  padding-right: 1rem;
  min-width: 6.5rem;
}
.small_title {
  height: 2.4rem;
  margin-top: -10px;
  font-size: 1rem;
}
.centerBox {
  width: 51%;
}
.centerTop {
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 0.4rem;
}
.centerBottom {
  width: 100%;
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
}
.centerBottombox {
  width: 49%;
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 4px;
}
.echart_box {
  width: 100%;
  height: 40rem;
}
.echart_1,
.echart_2 {
  height: 23.5rem;
  width: 100%;
}

.bottomBox {
  margin: 0 15px;
  display: flex;
  justify-content: space-between;
}
.botbox {
  width: 26.5%;
}
.l1 {
  margin-top: 1.5rem;
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 4px;
}
.l2 {
  margin-top: 1.5rem;
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 4px;
}
.h40 {
  height: 4rem;
}
.li_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.liItem {
  width: 45%;
  height: 100px;
  padding-top: 30px;
}
.sl {
  font-family: Helvetica-Bold;
  font-size: 3rem;
  color: #6fd9e8;
  letter-spacing: 0;
  padding-right: 1rem;
}
.or {
  color: rgba(225, 122, 77, 1);
}
.dw {
  font-family: PingFangSC-Regular;
  font-size: 1.5rem;
  color: #7a8ccb;
  letter-spacing: 0;
}
.liItemtitle {
  font-family: PingFangSC-Regular;
  font-size: 1.5rem;
  color: #cee4ff;
  letter-spacing: 0;
  text-align: center;
  margin-top: 1rem;
}

.rbx {
  margin-top: 1.5rem;
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 4px;
}
.centbox {
  width: 45%;
}
.ul_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ul_liItem {
  height: 12rem;
  width: 19%;
  margin-top: 1.5rem;
  background-image: linear-gradient(135deg, #010f4e 0%, #00093b 100%);
  border: 1px solid rgba(42, 129, 198, 0.5);
  box-shadow: inset 0 0 8px 2px rgba(42, 129, 198, 0.2);
  border-radius: 4px;
}
.liItem_title {
  font-family: PingFangSC-Regular;
  font-size: 1.5rem;
  color: #c8d4ff;
  letter-spacing: 0;
  text-align: center;
  padding-top: 2rem;
}
.liItem_body {
  text-align: center;
  padding-top: 2rem;
}
.liItem_body span:nth-child(1) {
  font-family: Helvetica-Bold;
  font-size: 3rem;
  color: #edf7ff;
  letter-spacing: 0;
}
.liItem_body span:nth-child(2) {
  font-family: PingFangSC-Regular;
  font-size: 1.5rem;
  color: #7a8ccb;
  letter-spacing: 0;
  margin-left: 2rem;
}
.chart_4 {
  height: 78.5rem;
  width: 100%;
  background-image: linear-gradient(135deg, #092059 0%, #000f4a 100%);
}
.r1_box {
  display: flex;
  justify-content: space-around;
  padding: 1rem 2rem;
  height: 9.4rem;
}
.r4_box {
  height: 28rem;
  width: 100%;
}
.r3_box {
  height: 19.8rem;
  width: 100%;
}
.sp_title {
  font-family: PingFangSC-Regular;
  font-size: 1.5rem;
  color: #7a8ccb;
  letter-spacing: 0;
  text-align: left;
}
.sp_num {
  font-family: Helvetica-Bold;
  font-size: 3rem;
  color: #edf7ff;
  letter-spacing: 0;
  margin-top: 1.5rem;
  text-align: left;
}

注意： 样式代码中有些不属于本页面的代码，没有剔除。

MoXinXueWEB
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序echarts动态获取数据 | echarts在线定制版本5.4.0
weixin_47124112的博客
04-19 572
【代码】小程序echarts动态获取数据 | echarts在线定制版本5.4.0。
Echarts在线定制构建
withoutfear的博客
05-30 3605
https://www.echartsjs.com/builder.html
ECharts：五大卓越在线示例库助力高效数据可视化开发
最新发布
(ง •̀_•́)ง
04-17 646
Make A Pie是一个专注于ECharts图表分享和展示的社区，它汇集了大量用户上传的精美案例，涉及各个行业和场景，不仅提供了完整的代码示例，还支持交互式预览，帮助开发者快速复用或学习创新图表样式。ECharts官网提供的示例库是最权威、最新的展示平台，涵盖了所有基础和高级图表类型，每个示例都配有详尽的代码解释和配置说明。ISQQW作为一个综合性的ECharts示例网站，拥有众多实用的图形示例，尤其适合对ECharts不够熟悉的开发者迅速查找模板并进行快速开发，大大提升了工作效率。
echarts数据可视化项目搭建（二）
m0_54510474的博客
01-28 1027
使用echarts实现一些基础的数据可视化案例
用echarts绘制的柱状图、折柱结合图，源码文末免费拿！
高级数据分析师，分享Python知识
05-26 1499
本文中的所有代码，全部都有详细注释，有需要的同学可以在文末领取！Apache Echarts 官网地址：https://echarts.apache.org/zh/index.htmlEcharts是一款基于JavaScript的开源可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等等。其中，柱状图是一种常用的图表类型，用于展示数据的分布情况。本文将介绍如何使用Echarts绘制一些常用的柱状图。你可以使用如下命令通过 npm 安装 ECharts 在线定制 ECharts 在线下载js文件：ht
echarts绘图
mapbar_front的博客
11-04 6215
1、echarts的基本使用 第一步、初始化一个具有宽高的盒子。<div id='box'></div>第二步、引入echarts的js文件<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.js"></script>第三步、进行js初始化配置
ECharts绘图解决方案-流动关系图.docx
10-26
ECharts绘图解决方案-流动关系图.docx
echartsgeo设置颜色-ECharts绘图解决方案-流动关系图.docx
10-26
echartsgeo设置颜色-ECharts绘图解决方案-流动关系图.docx
ASP.NET操作echarts
03-27
使用ASP.NET与echarts进行数据交互，利用C#中的ASP.NET作为后台产生数据，通过Ajax作为前端定时与后端进行数据交互
在vue中实现清除echarts上次保留的数据(亲测有效)
10-14
主要介绍了在vue中实现清除echarts上次保留的数据(亲测有效)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
echarts.simple.min.js
07-13
echarts简单轻型板js包
echart 属性以及用法详解；title、legend 、tooltip 、xAxis 、yAxis 、series；pie
柠檬酸
10-16 4845
关于echart属性及用法、title、legend 、tooltip 、xAxis 、yAxis 、series属性介绍；pie、line实例
多个echarts引用
existent
04-17 809
1.效果图 2.说明 2.1 Echarts引用关键在于容器的创建 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>***</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.m
echarts在本地svg背景图上描点
qq_33404590的博客
02-22 653
echarts中使用本地图片---描点
Echarts绘图使用经验
jp_zhou256的博客
05-13 2103
摘要 1.如何查找echarts相对路径中的数据文件(针对动态加载)； 2.他山之石可以攻玉(通过类比echarts其他代码中的相同键值对的书写，做相同字段的静态直接替换，或者对近义词字段直接做替换来绘图) 1.查找echarts相对路径中的数据文件(针对动态加载) 以 https://echarts.baidu.com/echarts2/doc/example/webkit-dep2.html ...
百度开源绘图工具——echarts的使用
热门推荐
weixin_42213622的博客
02-23 1万+
推荐学习网址：https://echarts.baidu.com/echarts2/doc/example.html 使用前需要先进行模块的安装： pip install pyecharts pip install pyecharts-snapshot 条形图的绘制 ——Bar 需求1： 假设你获取到了某年内地电影票房前几的电影(列表a)和电影票房数据(列表b),那么如何更加直观的展示该数据...
Echarts 百度画图插件
枫之木落的博客
01-20 1804
Echarts 是百度的一个js画图插件，非常好用，可以画扇形图、条形图、折线图、散点图、地图等，简单好用，画的图非常漂亮，官方有各种模板和入门教程 html代码 添加一个div标签就行了，echarts生成的图片大小是根据你设置div的大小生成的 div id="main" style="width: 600px;height:g00px;"> js代码： 主要分为三步： 1、初
echarts 画图
cp_mss的博客
06-07 779
最近由于画图需要  ，搜到了一个比较好的工具，就是echarts,先看看它的画图效果吧。echarts官网上有各种功能的图，如果有需要可以去官网搜索。想学习的也可以去官网看看它的教程，是中文的。所以就不在赘述。...
ECharts-在线定制-可自由选择所需图表、坐标系、组件进行打包下载。（ECharts.min.js下载）
weixin_40517799的博客
05-06 647
ECharts-在线定制-可自由选择所需图表、坐标系、组件进行打包下载。 https://echarts.apache.org/zh/builder.html 根据你的需求选择 等待即可，浏览器会自动下载下来
vue3如何使用echarts绘图
09-17
使用echarts绘图的步骤如下： 1. 在HTML文件中创建一个容器来显示echarts图表。可以使用元素，并给它一个唯一的id，比如id="echarts_con"。 2. 在CSS样式中为这个容器设置一些基本的样式，比如边框、圆角、宽度和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值