简单的柱状图+饼状图（echarts初识）

最新推荐文章于 2024-05-22 09:57:12 发布
最新推荐文章于 2024-05-22 09:57:12 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： echarts 文章标签： vue.js echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43909743/article/details/114868958
版权

效果图

在这里插入图片描述

思路

柱状图：
	series中两个不同data数据项，第一个设置一个间距，x坐标隐藏
扇形图：
	series中两个相同data数据项，使用两个完全相同的扇形重合，设置不同的itemStyle：显示指示线的同时可以显示百分比的操作
字段解释会在代码中体现

源代码（vue）

html

<template>
  <div class="contant">
    <div class="top">
      <el-date-picker class="mmmyinput"
        v-model="time"
        type="daterange"
        range-separator="-"
        value-format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <div class="center">
      <div>
        <div class="doc-center">医院</div>
        <div ref="pigOne"></div>
      </div>
      <div>
        <div class="doc-center">会诊</div>
        <div ref="pigTwo"></div>
      </div>
      <div>
        <div class="doc-center">医生</div>
        <div ref="pigThree"></div>
      </div>
    </div>
  </div>
</template>

style中

<style lang="less" scoped>
  .contant{
    width: 98%;
    margin: 0 auto;
    font-family: Source Han Sans CN;
    font-weight: 400;
    min-height: 800px;
    margin-top: 20px;
  }
  .top{
    float:right;
    margin-bottom: 20px;
  }
  .center{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; //换行
    div{
      position: relative;
      width: 49%;
      height: 345px;
      background: #FFFFFF;
      &:nth-child(2){
        margin-bottom: 15px;
      }
      &:nth-child(3){
        width: 100%;
        .doc-center{
          position: absolute;
          color: #FFF;
          /* margin: auto; */
          left: 37%;
          top: -0.1rem;
          width: 1.70rem;
          height: 0.4rem;
          line-height: 0.4rem;
          text-align: center;
          background: url('../../assets/slog@2x.png') no-repeat;
          background-position:center;
          z-index: 99;
        }
      }
      .doc-center{
        position: absolute;
        color: #FFF;
        /* margin: auto; */
        left: 26%;
        top: -0.1rem;
        width: 1.70rem;
        height: 0.4rem;
        line-height: 0.4rem;
        text-align: center;
        background: url('../../assets/slog@2x.png') no-repeat;
        background-position:center;
        z-index: 99;
      }
    }
  }
  .mmmyinput{
    // box-sizing: border-box;
    width: 300px;
    // height: 35px;
    text-align: center;
    margin-right: 29px;
    // line-height: 80px;
  }
  
</style>

script中

<script>
import * as echarts from 'echarts';
export default {
  name:'Comprehensive',
  data(){
    return {
      startTime:'',
      endTime:'',
      time:[],
      dataOne1:200,
      dataOne2:600,
      dataOne3:800,
      docdata:[
        {value: 680, name: '医师'},
        {value: 340, name: '医生'},
        {value: 1190, name: '主治医生'},
        {value: 850, name: '副主任医生'},
        {value: 340, name: '主任医生'}
      ],
      hosdata:[
        {value: 1048, name: '三级医院'},
        {value: 735, name: '二级医院'},
        {value: 580, name: '基层医院'}
      ]
    }
  },
   computed:{
    startTime(){
      return this.time[0]
    },
    endTime(){
      return this.time[1]
    }
  },
  watch:{
    time:{
      handler(newName, oldName) {
      
      },
    },
  },
  mounted(){
    this.draw()
  },
  methods:{
    draw () {
       this.Histogram()
       this.chartPie1()
       this.chartPie2() 
    },
  }
}
</script>

单个图代码太长、一个一个显示
位置methods下
柱状图

Histogram(){ // 柱状图
      // 用echarts来画图
        // 1. 初始化echarts对象。
        //  格式： const echartobj = echarts.init(dom结构)
        // 2. 通过固定格式的option来画图
        //    echartobj.setOption(option)
        // 基于准备好的dom，初始化echarts实例
        this.$refs.pigTwo.style.width="494px"
        this.$refs.pigTwo.style.hight="200px"
        var myChart = echarts.init(this.$refs.pigTwo);
        // 指定图表的配置项和数据
        let option = {
          title:[ //标题
            {
              text: `会诊量`,
              bottom:'3%', // 位置
              left:"35%",
              textStyle:{fontSize: "12px"}
            },
            {
              text: `${this.dataOne1+this.dataOne2}`,
              bottom:'3%',
              left:"45%",
              textStyle:{fontSize: "12px",color:'#007AFF'}
            },
            {
              text: `次`,
              bottom:'3%',
              left:"52%",
              textStyle:{fontSize: "12px"}
            },
          ],
          legend: {  // 图例组件 标记
            show: true,
            right:"15%",
            top:"10%",
            orient:'vertical',
            data: [
              { name: '远程会诊',icon: 'circle',textStyle: { fontSize: "10px"}, }, 
              { name: '双向转诊',icon: 'circle',textStyle: { fontSize: "10px"}, } 
            ] 
          },
          grid:{ // 柱状图设置位置
            top:'35%',
            bottom:'15%',
          },
          xAxis: [ // x轴
            {
              type: 'category',
              show: false,
            }
          ],
          yAxis: [
            {
              type: 'value',
              min:'0',
              // max:'1200'
            }
          ],
          tooltip: { // 鼠标移动显示
              trigger: 'item'
          },
          series: [
            {
              name: '远程会诊',
              type: 'bar',
              data:[
                {value:this.dataOne1,name:'远程会诊'},
                
              ],
              barWidth: '15%',  // 柱形的宽度
              barGap:'155%', // 调整间距
              itemStyle: {
                normal: {
                  label: {
                    color: '#000000',
                    show: true,
                    position: 'top', 
                  },
                }
              },
            },
            {
              name: '双向转诊',
              type: 'bar',
              data:[{value:this.dataOne2,name:'双向会诊'}],
              barWidth: '15%',  // 柱形的宽度
              itemStyle: {
                normal: {
                  label: {
                    color: '#000000',
                    show: true,
                    position: 'top', 
                  },
                }
              },
            }
          ]
  
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },

饼状图

chartPie1(){ // 饼状图
       this.$refs.pigOne.style.width="494px"
        this.$refs.pigOne.style.hight="200px"
        var myChart = echarts.init(this.$refs.pigOne);
        // 指定图表的配置项和数据
        let option = {
          title:[ // 标题显示
              {
                text: `医院`,
                bottom:'3%', // 显示位置
                left:"37%",
                textStyle:{fontSize: "12px"}
              },
              {
                text: `${this.dataOne1+this.dataOne2}`,
                bottom:'3%',
                left:"45%",
                textStyle:{fontSize: "12px",color:'#007AFF'}
              },
              {
                text: `家`,
                bottom:'3%',
                left:"54%",
                textStyle:{fontSize: "12px"}
              },
            ],
            tooltip: { // 鼠标移动显示
                trigger: 'item'
            },
            legend: { // 图例标记样式显示
              tooltip: { trigger: 'axis' },
              show: true,
              right:"5%",
              top:"10%",
              orient:'vertical', // 垂直显示
              data: [
                { name: '三级医院',icon: 'circle',textStyle: { fontSize: "10px"}, }, 
                { name: '二级医院',icon: 'circle',textStyle: { fontSize: "10px"}, },
                { name: '基层医院',icon: 'circle',textStyle: { fontSize: "10px"}, }
              ] 
            },
            series: [
                {
                  name: '医院个数',
                  type: 'pie',   //饼状图
                  radius: '50%',   //大小
                  minAngle:'15', // 扇形的最小角度
                  center: ['50%', '50%'],    //显示位置
                  data: this.hosdata,   //数据,我们ajax获取
                  roseType: 'radius',
                  itemStyle: {
                    normal: {
                        label: {        //此处为指示线文字
                          fontStyle: "normal",
                          formatter:'{c}',
                        },
                        labelLine: {    //指示线状态
                            show: true,
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                      }
                    },
                  },// 下面在加一个相同数据的样式图，作用调整不同的itemStyle
                  {
                    name: '',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '50%'],
                    data:this.hosdata,
                    roseType: 'radius',
                    itemStyle: {
                      normal: {
                        label: {        //此处为指示线文字
                            show: true,
                            position: 'inner', //标签的位置
                            textStyle: {
                                fontWeight: 200,
                                fontSize: 10    //文字的字体大小
                            },
                            formatter:'{d}%',
                        },
                        labelLine: {    //指示线状态
                            show: true,
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                      }
                    },
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },

饼状图二

    chartPie2(){ // 饼状图
        this.$refs.pigThree.style.width="100%"
        this.$refs.pigThree.style.hight="180px"
        var myChart = echarts.init(this.$refs.pigThree);
        // 指定图表的配置项和数据
        let option = {
          title:[
              {
                text: `专家数量`,
                bottom:'3%',
                left:"45%",
                textStyle:{fontSize: "12px"}
              },
              {
                text: `${this.dataOne1+this.dataOne2}`,
                bottom:'3%',
                left:"52%",
                textStyle:{fontSize: "12px",color:'#007AFF'}
              },
              {
                text: `人`,
                bottom:'3%',
                left:"56%",
                textStyle:{fontSize: "12px"}
              },
            ],
            tooltip: {
                trigger: 'item'
            },
            legend: {
              tooltip: { trigger: 'axis' },
              show: true,
              right:"5%",
              top:"10%",
              orient:'vertical',
              data: [
                { name: '主治医生',icon: 'circle',textStyle: { fontSize: "10px"}, }, 
                { name: '主任医生',icon: 'circle',textStyle: { fontSize: "10px"}, },
                { name: '副主任医生',icon: 'circle',textStyle: { fontSize: "10px"}, },
                { name: '医生',icon: 'circle',textStyle: { fontSize: "10px"}, },
                { name: '医师',icon: 'circle',textStyle: { fontSize: "10px"}, },
              ] 
            },
            series: [
                {
                  name: '医院个数',
                  type: 'pie',   //饼状图
                  minAngle:'15', // 扇形的最小角度
                  radius: '60%',   //大小
                  center: ['50%', '50%'],    //显示位置
                  data: this.docdata,   //数据,我们ajax获取
                  // roseType: 'radius',
                  itemStyle: {
                    borderRadius: 10,
                    borderWidth: 2,
                    borderColor: '#fff',
                    normal: {
                        label: {        //此处为指示线文字
                          fontStyle: "normal",
                          formatter:'{c}',
                        },
                        labelLine: {    //指示线状态
                            show: true,
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                      }
                    },
                    emphasis:{
                      itemStyle: {
                        borderWidth: 3,
                        borderType: "solid",
                        shadowBlur: 1.5,
                        shadowOffsetX: 1.5,
                        opacity: 0.76,
                        shadowColor: "rgba(244, 240, 240, 1)",
                        borderColor: "rgba(248, 244, 244, 1)"
                      }
                    }
                  },
                  {
                    name: '',
                    type: 'pie',
                    radius: '60%',
                    minAngle:'15', // 扇形的最小角度
                    center: ['50%', '50%'],
                    data:this.docdata,
                    // roseType: 'radius',
                    itemStyle: {
                      borderRadius: 10,
                      borderWidth: 2,
                      borderColor: '#fff',
                      normal: {
                        label: {        //此处为指示线文字
                            show: true,
                            position: 'inner', //标签的位置
                            textStyle: {
                                fontWeight: 200,
                                fontSize: 10    //文字的字体大小
                            },
                            formatter:'{d}%',
                        },
                        labelLine: {    //指示线状态
                            show: true,
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                      }
                    },
                    emphasis:{
                      itemStyle: {
                        borderWidth: 3,
                        borderType: "solid",
                        shadowBlur: 1.5,
                        shadowOffsetX: 1.5,
                        opacity: 0.76,
                        shadowColor: "rgba(244, 240, 240, 1)",
                        borderColor: "rgba(248, 244, 244, 1)"
                      }
                    }
                }
            ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

实例二

在这里插入图片描述

<div class="center">
        <div ref="container" style="height: 100%"></div>
      </div>

      <div class="center">
        <div ref="kcNums" style="height: 100%"></div>
      </div>
  • 数据格式
chartData:[
	{
		count:"0",
		date:"2021-04-19"
	},
	{
		count:"3",
		date:"2021-04-20"
	},
	{
		count:"0",
		date:"2021-04-21"
	},
	{
		count:"6",
		date:"2021-04-22"
	}
	// 等等····
]
kcdata:[
	{
		name:"焦虑",
		value:2
	},
	{
		name:"厌学",
		value:3
	},
	{
		name:"注意力不集中",
		value:3
	},
	{
		name:"失眠",
		value:0
	},
	{
		name:"早恋",
		value:0
	}
]
  • 渲染准备
    myChart () {
      this.$refs.container.style.width = '100%'
      this.$refs.container.style.hight = '400px'
      var myChart = echarts.init(this.$refs.container)
      var dateList = this.chartData.map(function (item) {
        // return item.date.slice(5)
        return item.date
      })
      var valueList = this.chartData.map(function (item) {
        return item.count
      })
      const option = {
        // Make gradient line here
        visualMap: [{
          show: false,
          type: 'continuous',
          seriesIndex: 0,
          min: 0,
          max: 400
        }, {
          show: false,
          type: 'continuous',
          seriesIndex: 1,
          dimension: 0,
          min: 0,
          max: dateList.length - 1
        }],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: [{
          axisLabel: {
            // interval: 3 // 处理x轴间隔
          },
          // type: 'category',
          // boundaryGap: false,
          data: dateList
        },
        {
          type: 'category',
          // boundaryGap: false,
          data: dateList,
          gridIndex: '1'
        }
        ],
        yAxis: [{
        }, {
          gridIndex: '1'
        }],
        grid: [{
          top: '16%',
          left: '15%'
        }, {
          top: '16%',
          left: '15%'
        }],
        // grid: {
        //   top: '35%',
        //   bottom: '15%'
        // },
        // tooltip: {
        //   trigger: 'item'
        // },
        series: [
          // {
          //   type: 'line',
          //   showSymbol: false,
          //   data: valueList
          // },
          {
            name:'回复条数',
            type: 'line',
            showSymbol: true,
            data: valueList,
            xAxisIndex: 1,
            yAxisIndex: 1
            // markLine: {
            //   data: [
            //     { type: 'average', name: '平均值' },
            //     {
            //       symbol: 'circle',
            //       label: {
            //         position: 'start'
            //       },
            //       type: 'max',
            //       name: '最高点'
            //     }
            //   ]
            // }
          }
        ]

      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    chartPie2(){ // 饼状图
        this.$refs.kcNums.style.width="100%"
        this.$refs.kcNums.style.hight="400px"
        var myChart1 = echarts.init(this.$refs.kcNums);
        // 指定图表的配置项和数据
        this.kcdata = this.kcdata.map(item=>{
          return {
            name: item.name,
            value:item.total
          }
        })
        let data = this.kcdata.map(item=>{
          return {
            name: item.name,
            // value:item.total,
            // icon: 'circle',
            textStyle: { fontSize: "14px"}
          }
        })
        let option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
              tooltip: { trigger: 'axis' },
              show: true,
              left:"5%",
              bottom:"10%",
              orient:'vertical',
              data: data
            },
            series: [
                {
                  name: '课程数统计',
                  type: 'pie',   //饼状图
                  radius: ['40%', '70%'],
                  minAngle:'15', // 扇形的最小角度
                  // radius: '60%',   //大小
                  center: ['50%', '50%'],    //显示位置
                  data: this.kcdata,   //数据,我们ajax获取
                  roseType: 'radius',
                  itemStyle: {
                    borderRadius: 10,
                    borderWidth: 2,
                    borderColor: '#fff',
                    normal: {
                        label: {        //此处为指示线文字
                          show: false,
                          fontStyle: "normal",
                          formatter:'{c}',
                        },
                        labelLine: {    //指示线状态
                            show: false,
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                      }
                    },
                    emphasis:{
                      itemStyle: {
                        borderWidth: 3,
                        borderType: "solid",
                        shadowBlur: 1.5,
                        shadowOffsetX: 1.5,
                        opacity: 0.76,
                        shadowColor: "rgba(244, 240, 240, 1)",
                        borderColor: "rgba(248, 244, 244, 1)"
                      }
                    }
                  },
                  {
                    name: '课程数统计',
                    type: 'pie',
                    // radius: '60%',
                    radius: ['40%', '70%'],
                    minAngle:'15', // 扇形的最小角度
                    center: ['50%', '50%'],
                    data:this.kcdata,
                    // roseType: 'radius',
                    itemStyle: {
                      borderRadius: 10,
                      borderWidth: 2,
                      borderColor: '#fff',
                      normal: {
                        label: {        //此处为指示线文字
                            show: false,
                            position: 'inner', //标签的位置
                            textStyle: {
                                fontWeight: 200,
                                fontSize: 10    //文字的字体大小
                            },
                            formatter:'{d}%',
                        },
                        labelLine: {    //指示线状态
                            show: false,
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                      }
                    },
                    emphasis:{
                      itemStyle: {
                        borderWidth: 3,
                        borderType: "solid",
                        shadowBlur: 1.5,
                        shadowOffsetX: 1.5,
                        opacity: 0.76,
                        shadowColor: "rgba(244, 240, 240, 1)",
                        borderColor: "rgba(248, 244, 244, 1)"
                      }
                    }
                }
            ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option);
    }
  }
}
</script>
Best_卡卡
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
matplotlib 饼图+ 柱状图的绘制(官方案例)
酱橙的博客
06-03 950
import matplotlib.pyplot as plt from matplotlib.patches import ConnectionPatch import numpy as np # 创建 figure 图片, 然后分配子视图 # make figure and assign axis objects fig = plt.figure(figsize=(9, 5)) ax1 = fig.add_subplot(121) ax2 = fig.add_subplot(122) fig.subp
echart中柱状图和饼状图的数据展示
BraveZhouzhou的博客
07-22 3126
EChart中柱状图和饼状图的数据展示
echarts组合图 柱图+饼图
qq_36521848的博客
05-25 1373
效果： 代码示例： option = { tooltip: { trigger: 'axis' }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, .
Echarts图表混搭之柱状图与饼图混搭图表
最新发布
wqqstudy的博客
05-22 791
Echarts图表混搭之柱状图与饼图混搭图表 利用ECharts各图表的在线构建次数、各图表组件的使用次数、各版本下载和各主题下载情况的数据绘制柱状图与饼图混搭图表
Python数据可视化笔记03--柱状图、饼状图实战
MARS_098的博客
01-25 6974
Python数据可视化笔记01--Matplotlib基础 Python数据可视化笔记02--折线图、散点图实战 本文索引： 柱状图 饼状图 环境：Windows10 + jupyter notebook 一、柱状图 【柱状图】 使用Matplotlib提供的bar()函数来绘制柱状图。 与前面介绍的plot()函数类似，程序每次调用bar()函数时都会生成一组柱状图，...
ECharts —— 简单实现饼图和柱状图
Bruce_Json的博客
09-29 2655
饼图 javascript //初始化echarts var pieCharts = echarts.init(document.getElementById("pie")); //显示一段动画 pieCharts.showLoading(); //异步请求数据 $.ajax({ type: "post", a...
三、Echarts使用柱状图、饼图
weixin_42317685的博客
07-16 733
Echarts使用柱状图、饼图
php报表之jpgraph柱状图实例代码
01-21
新手初识jpgraph肯定会遇到各种各样的问题,比如乱码什么的,本案例是jpgraph3.0.7制作,也经过本人的多次实验，解决乱码问题 复制代码 代码如下: <?php $datay=array(); //纵坐标数据 $datax=array(); //横坐标数据...
通信工程-通信工程图纸初识.pptx
10-30
总结起来，通信工程图纸的初识和CAD软件的使用是通信工程勘察设计的核心技能。从识读图纸的基本要素到熟练运用CAD软件进行设计，都需要扎实的理论基础和实践操作经验。通过这样的学习，工程师可以更好地理解和执行...
java+初识面向对象+基础题目
07-14
Java面向对象基础题目解析 在本节中，我们将通过一系列的题目，深入探讨Java面向对象的基础知识。这些题目涵盖了Java中的面向对象编程的基本概念，包括类、对象、继承、多态、封装等。 题目一：Student类 ...
初识C++（下）的总结图像压缩包
03-22
在本压缩包中，我们关注的是“初识C++（下）的总结图像”，这表明这是一个针对C++初学者的学习资料，重点在于理解和掌握C++的基础概念和编程技巧。C++是一种强大的、通用的编程语言，它融合了面向过程和面向对象的...
PHP实现随机生成水印图片功能
01-20
仅限初识GD库，实例学习。 一、需求 网站的布局用到了类似慕课网课程列表的风格，每一个课程是一个banner图，图下面是标题加简介。因为课程的数量较大没有为所有的课程设计专门的banner，所以需要按照一定的规则，来...
echarts 实现饼状图和柱状图
Bian_MCheng的博客
01-18 2085
1.引入所需要的js      （Java开发交流群 677807540   大家可以一起讨论技术欢迎加入  (需要js可以加群下载)） &lt;script src="${basePath}/js/echarts/echarts.js"&gt;&lt;/script&gt; &lt;script src="${basePath}/js/echarts/basisdataEchats.js"&...
echarts初体验————制作柱状图和饼图
qq_53825610的博客
09-07 393
今天开发涉及到了图形，特意去看了下相关文档，实现了柱状图和饼图。柱状图样式（点击上面的蓝绿黄可以选择是否显示这个记录）controller层：返回的是一个map集合。
echarts之柱状图(bar)、饼状图(pie)
wangchaohpu的博客
08-17 4636
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;echartsLineTest&lt;/title&gt; &lt;script src="../../libs/jquery/j
Echarts柱状图，饼状图，折线图案例
涂作权的博客
04-22 3578
在使用Echarts之前需要做的工作是引入Echarts所需的js：/echarts.min.js" charset="utf-8"> 定义要在那个div区域显示图形： similarity-sentence">           unqualified-sentences"> 下面的id就是是上面div的iddistributionDiagram:function(id,top
饼图柱图tab切换_如何用ArcGIS制作饼柱图组合的专题图
weixin_39983563的博客
12-10 638
1. 概述在ArcGIS中可以制作信息图表的柱状图和饼状图，例如双向柱状图是将两个方向相反的柱状图放置在一起，同时表达两种不同信息，同时增加信息的对比效果，将两个年份间的多个指标或多个年份间的两个指标进行对比，那么如何将柱状图和饼图结合起来的呢？2. 制作柱状图地图数据可以通过微图下载，如果你还没有安装微图，请关注头条号"水经注GIS",私信回复"微图"即可获得安装包下载地址。微图下载矢量数据这里...
echarts饼图+柱状图联动效果
weixin_43756775的博客
12-15 1651
-------------------2020-12-23更新-------------------------- 之前源码忘记放了，有朋友需要那么我就补上源码吧 这是vue源码 <template> <div> <div id="pieOne" :style="{width: '900px', height: '300px'}"></div> <div id="histogram" :style="{width: '900px',.
echarts 图表制作(饼图、柱状图(包含关系)、时间轴)
好狗呱呱叫的博客
12-19 9670
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <div class="container-fluid" id="chartOne" class="main" style="height: 100%"> // 基于准备好的dom，初始化e
Flash绘图基础元件帧逐帧动画渐变动画造型设计(1)完整版资料.ppt
11-14
在初识Flash部分，我们了解了Flash的用户界面，包括菜单栏、标准工具栏、控制工具栏、绘图工具栏等。其中，时间轴面板起到了关键的作用，可以用来控制动画中每一帧的显示。属性面板和浮动面板则提供了对绘图和动画的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值