echarts学习笔记 各图配置(折线图、圆环图、柱形图、折线面积图)

最新推荐文章于 2024-05-28 15:45:01 发布
最新推荐文章于 2024-05-28 15:45:01 发布
阅读量696 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/lpcysz/blog/1819166
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

因为每次使用配置太麻烦，所以记录一下，下次如有相同图，就可以拿过来用，哈哈

1、line折线图

效果图

输入图片说明

setPieCharts (id, name, xName, yName, x, y, data) {
      let $echartsDOM = document.getElementById(id)
      let myEcharts = echarts.init($echartsDOM)
      let option = {
        title: {
          text: name,
          left: '9.1%'
        },
        xAxis: {
          type: 'category',
          data: x,
          show: true, // 是否显示坐标轴
          axisTick: { // x轴刻度
            show: false
          },
          axisLine: { // 线配置
            show: true,
            lineStyle: {
              color: '#d8d8da'
            }
          },
          axisLabel: { // 标识样式
            color: '#333'
          },
          name: '('+ xName +')', // 配置x轴name
          nameLocation: 'end',
          nameTextStyle: {
            fontFamily: 'PingFangSC-Regular',
            color: '#C4CDD8',
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          data: y,
          name: '('+ yName +')', // name相关配置
          nameLocation: 'end',
          nameTextStyle: {
            fontFamily: 'PingFangSC-Regular',
            color: '#C4CDD8',
            fontSize: 12
          },
          axisLine: { // 线配置
            show: true,
            lineStyle: {
              color: '#FFF'
            }
          },
          axisLabel: { // 标识样式
            color: '#333'
          },
        },
        series: [{
          data: data,
          type: 'line',
          symbolSize: 6, // 标记大小
          color: '#7EB0E9',
          lineStyle: {
              color: '#7EB0E9'
          },
          label: {
            show: true,
            backgroundColor: '#4381E4',
            position: 'top',
            width: '200',
            padding: [5,15,5,15],
            width: 80,
            height: 40
            /* backgroundColor: {
              image: 'images/Rectangle@2x.png'   
            }*/              
          }
        }]
      }
      myEcharts.setOption(option)
      //window.addEventListener('resize', myEcharts.resize())
    }

模拟数据

lineData: [
        {
          'subject': '数学成绩',
          'id': 'math',
          'xName': '日',
          'yName': '分',
          'x': ['1.2', '1.7', '1.14', '1.21', '1.28', '2.5', '2.11'],
          'y': ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
          'data': ['50', '60', '55', '80', '92', '13', '34', '12', '30', '89']
        },
        {
          'subject': '数学班级排名',
          'id': 'chinese',
          'xName': '日',
          'yName': '分',
          'x': ['1.2', '1.7', '1.14', '1.21', '1.28', '2.5', '2.11'],
          'y': ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
          'data': ['30', '40', '25', '80', '92', '73', '34', '52', '30', '89']
        },
        {
          'subject': '语文成绩',
          'id': 'math1',
          'xName': '日',
          'yName': '分',
          'x': ['1.2', '1.7', '1.14', '1.21', '1.28', '2.5', '2.11'],
          'y': ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
          'data': ['50', '60', '55', '80', '92', '13', '34', '12', '30', '89']
        },
        {
          'subject': '语文班级排名',
          'id': 'chinese1',
          'xName': '日',
          'yName': '分',
          'x': ['1.2', '1.7', '1.14', '1.21', '1.28', '2.5', '2.11'],
          'y': ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
          'data': ['30', '40', '25', '80', '92', '73', '34', '52', '30', '89']
        }
      ]

初始化

mounted () {
    this.lineData.map((v, index) => {
      this.setPieCharts(v.id, v.subject, v.xName, v.yName, v.x, v.y, v.data)
    })
  }

2、圆环占比图

效果图

输入图片说明

option配置

setPieCharts (id) {
      let $echartsDOM = document.getElementById(id)
      let myEcharts = echarts.init($echartsDOM)
      let num = 180
      let option = {
        series: [{
          type: 'pie',  // 图类型
          radius: ['50%', '35%'], // 设置半径，外占比，内占比
          data: [
            {
              value: 80,
              name: '未读', // 图名称
              type: 'pie',  // 图类型
              label: {
                normal: { // label标准
                  position: 'center', //文字位置
                  formatter: '{one|{b}} {two|{c}}\n{br|}',
                  //lineHeight: 25,
                  rich: {
                    one: {
                      color: '#87CEFA',
                      fontSize: 10,
                      lineHeight: 14,
                      verticalAlign: 'middle'
                    },
                    two: {
                      color: '#87CEFA',
                      fontSize: 18,
                      lineHeight: 25,
                      verticalAlign: 'top'
                    },
                    br: {
                      height: 2,
                      borderWdth: 35,
                      width: '100%'
                    }
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: '#87CEFA'
                }
              }
            },
            {
              value: 100,
              name: '文档', // 图名称
              label: {
                normal: { // label标准
                  position: 'center', //文字位置
                  formatter: '{hr|}\n{two|' + num + '}\n{one|{b}}',
                  rich: { // formatter样式配置
                    one: { // 样式名
                      color: '#4C8AFE',
                      fontSize: 12
                    },
                    hr: {
                      borderColor: '#aaa',
                      width: '100%',
                      borderWidth: 0.5,
                      align: '',
                      height: 0
                    },
                    two: {
                      color: '#ADADBD',
                      fontSize: 10
                    }
                  }
                }
              },
              itemStyle: { // 颜色
                normal: {
                  color: '#4C8AFE'
                }
              }
            }
          ]
        }]
      }
      myEcharts.setOption(option)
      // window.addEventListener('resize', myEcharts.resize())
    }

3、圆环图

效果图

输入图片说明

option配置

setPieCharts (id, legData, data) {
      let $echartsDOM = document.getElementById(id)
      let myEcharts = echarts.init($echartsDOM)
      let option = {
        legend: {
          orient: 'vertical',
          x: 'right', // 说明列表位置配置
          y: 'middle',
          align: 'left', // 右侧图例位置
          padding: [0, 50, 0, 0], // 边距位置
          data: legData
        },
        series: [
          {
            center: ['40%', '50%'], // 图形位置配置
            name: '圆环图',
            type: 'pie',
            radius: ['80%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'left'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: data
          }
        ]
      }
      myEcharts.setOption(option)
      window.addEventListener('resize', myEcharts.resize())
    }

模拟数据

dountChart: [
        {
          'name': '线上线下用时对比',
          'pieData': [
            {value: 80, name: '语文班课:80小时'},
            {value: 40, name: '语文在线:40小时'},
            {value: 60, name: '数学在线:60小时'}
          ]
        },
        {
          'name': '科目学习用时对比',
          'pieData': [
            {value: 30, name: '语文班课:30小时'},
            {value: 20, name: '语文在线:20小时'},
            {value: 30, name: '数学在线:30小时'},
            {value: 40, name: '英语个性化:40小时'},
            {value: 60, name: '英语在线:60小时'}
          ]
        }
      ]

初始化

mounted () {
    this.dountChart.map((val, index) => {
      var legData = []
      val.pieData.map((v, i) => {
        legData.push(v.name)
      })
      this.setPieCharts(index, legData, val.pieData)
    })
  }

4、折线面积图

配置代码：

<template>
  <div class="pcLine"> <!-- 折线面积图 -->
    <p class="title">{{ title }}</p>
    <div class="map" ref="map" style="height: 2.2rem;width: 3.1rem;">
      <!-- <ve-line :data="chartData" height="100%" :extend="extend" :settings="chartSettings"></ve-line> -->
    </div>
  </div>
</template>

<script lang='ts'>
  import { Component, Prop, Vue } from 'vue-property-decorator'

  import echarts from 'echarts'
  require('echarts/lib/chart/line')

  @Component({
    components: {}
  })
  export default class pcLine extends Vue {
    @Prop({}) title!:string // 接收父组件传过来的数据
    @Prop({}) startColor!:string // 渐变颜色
    @Prop({}) endColor!:string // 渐变颜色

    chartData:any = {
      columns: ['time', '收入'],
      rows: [
        { 'time': '15', '收入': 1981 },
        { 'time': '16', '收入': 900 },
        { 'time': '17', '收入': 5291 },
        { 'time': '18', '收入': 1200 },
        { 'time': '19', '收入': 4398 },
        { 'time': '20', '收入': 1981 }
      ]
    }
    mounted () {
      setTimeout(() => {
        this.initEchartsFun()
      },1000)
      // window.onresize = () => { //  根据窗口大小调整曲线大小
		  //   const myChart = echarts.init(this.$refs.map as HTMLDivElement)
		  //   myChart.resize();
		  // }
    }
    initEchartsFun () {
      const myChart = echarts.init(this.$refs.map as HTMLDivElement)
      myChart.setOption({
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        calculable: true,
        grid: {
          top: 10,
          bottom: 20,
          left: 40,
          right: 10
        },
        xAxis: {
          type: 'category',
          boundaryGap: false, // 从0刻度开始
          splitLIne: { show: false }, // 刻度线
          axisTick: { show: false },
          axisLabel: {
            textStyle: {
              color: 'rgba(255, 255, 255, 1)',
              fontSize: 10
            }
          },
          data: ['15', '16', '17', '18', '19', '20']
        },
        yAxis: {
          type: 'value',
          // name: '单位：xxxx',
          splitLine: { show: false }, // 刻度线
          axisLine: { show: false },
          axistick: { show: false },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: 'rgba(255, 255, 255, 1)',
              fontSize: 10
            }
          }
        },
        series: {
          type: 'line',
          label: {
            normal: {
              color: this.startColor,
              show: true // 节点上是否显示数值
            }
          },
          symbol: 'circle', // 设置节点上的标记图形类型
          symbolSize: 4,
          showSymbol: false, // 默认为true，设值为false时，hover有效
          itemStyle: {
            normal: {
              show: true,
              color: this.startColor,
            }
          },
          areaStyle: {
            normal: { // 渐变配置
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: this.startColor
                }, {
                  offset: 1, color: this.endColor
                }],
                global: false
              }
            }
          },
          data: [ '1981', '900', '5291', '1200', '1981', '2423']
        }
      })
    }
  }
</script>

<style lang='less' scoped>
.pcLine {
  position: absolute;
  height: 2.7rem;
  width: 3.1rem;
  .title {
    height: .44rem;
    line-height: .44rem;
    padding-left: .2rem;
    font-size: .2rem;
    letter-spacing: 0;
    color: #00D3E3;
    background: rgba(0, 54, 115, .3);
  }
  .map {
    height: 2.2rem;
    width: 100%;
  }
}
</style>

5、圆环图

代码配置：

<template>
  <div class="pcRing"> <!-- 圆环图 -->
    <p class="title">{{title}}</p>
    <div class="map" ref="map" style="height: 2.2rem;width: 3.1rem;">
      <!-- <ve-pie :data="chartData" height="100%" :extend="extend" :settings="chartSettings"></ve-pie> -->
    </div>
  </div>
</template>

<script lang='ts'>
  import { Component, Prop, Vue } from 'vue-property-decorator'
  import echarts from 'echarts'
  require('echarts/lib/chart/pie')

  @Component({
    components: {}
  })
  export default class pcPie extends Vue {
    @Prop({}) title!:string // 接收父组件传过来的数据
    // title:string = '月收入业务类型'

    chartData:any = {
      columns: ['name', 'value'],
      rows: [
        { 'name': '2018-05-22', 'value': 510 },
        { 'name': '2018-05-23', 'value': 498 },
        { 'name': '2018-05-24', 'value': 210 },
        { 'name': '2018-05-25', 'value': 410 },
        { 'name': '2018-05-26', 'value': 498 },
        { 'name': '2018-05-27', 'value': 550 },
        { 'name': '2018-05-28', 'value': 498 }
      ]
    }
   
    mounted () {
      setTimeout(() => {
        this.initEchartsFun()
      }, 1000)
      // window.onresize = () => {//  根据窗口大小调整曲线大小
		  //   const myChart = echarts.init(this.$refs.map as HTMLDivElement)
		  //   myChart.resize();
		  // }
    }
    initEchartsFun () {
      const myChart = echarts.init(this.$refs.map as HTMLDivElement)
      myChart.setOption({
        tooltip: { // 鼠标悬浮时，提示tooltip位置
          trigger: 'item',
          formatter: "{a} <br/> {b} : {c} ({d}%)",
          position:  'left' // ['50%', '50%']
        },
        series: {
          name: this.title,
          type: 'pie',
          radius: ['50%', '80%'],
          // roseType: 'radius', // 'area' 切换模式半径模式or面积模式
          center: ['50%', '45%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '12',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          color: ['#64B9FC', '#81C784', '#E57373', '#369FF1', '#f1963b', '#ff4715', '#5072b8'],
          data: this.chartData.rows
        }
      })
    }
  }
</script>

<style lang='less' scoped>
.pcRing {
  position: absolute;
  height: 2.7rem;
  width: 3.1rem;
  .title {
    height: .44rem;
    line-height: .44rem;
    padding-left: .2rem;
    font-size: .2rem;
    letter-spacing: 0;
    color: #00D3E3;
    background: rgba(0, 54, 115, .3);
  }
  .map {
    height: 2.2rem;
    width: 100%;
  }
}
</style>

6、横向柱形图

配置代码：

<template>
  <div class="pcBar"> <!-- 柱状图 -->
    <p class="title">{{title}}</p>
    <div class="map" ref="map" style="height: 2.2rem;width: 3.1rem;">
      <!-- <ve-pie :data="chartData" height="100%" :extend="extend" :settings="chartSettings"></ve-pie> -->
    </div>
  </div>
</template>

<script lang='ts'>
  import { Component, Prop, Vue } from 'vue-property-decorator'
  import echarts from 'echarts'
  require('echarts/lib/chart/pie')

  @Component({
    components: {}
  })
  export default class pcBar extends Vue {
    @Prop({}) title!:string // 接收父组件传过来的数据
    chartData:any = {
      columns: ['name', 'value'],
      rows: [
        { 'name': '北京', 'value': 510 },
        { 'name': '浙江', 'value': 498 },
        { 'name': '湖南', 'value': 210 },
        { 'name': '江西', 'value': 410 },
        { 'name': '湖北', 'value': 498 },
        { 'name': '江苏', 'value': 550 },
        { 'name': '海南', 'value': 498 }
      ]
    }
    mounted () {
      setTimeout(() => {
        this.initEchartsFun()
      }, 1000)
      // window.onresize = () => {//  根据窗口大小调整曲线大小
		  //   const myChart = echarts.init(this.$refs.map as HTMLDivElement)
		  //   myChart.resize();
		  // }
    }
    initEchartsFun () {
      const myChart = echarts.init(this.$refs.map as HTMLDivElement)
      myChart.setOption({
        tooltip: { // 鼠标悬浮时，提示tooltip位置
          trigger: 'item',
          formatter: "{a} <br/> {b} : {c}",
          position:  'left' // ['50%', '50%']
        },
        calculable: true,
        grid: {
          top: 10,
          bottom: 20,
          left: 40,
          right: 20
        },
        xAxis: {
          type: 'value',
          boundaryGap: false, // 从0刻度开始
          axisTick: { // 分隔x轴下方小刻度线
            show: false
          },
          axisLine: { // x轴刻度线
            show: true
          },
          splitLine: { // 中间刻度线
            show: false
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(255, 255, 255, 1)',
              fontSize: 10
            }
          }
        },
        yAxis: {
          type: 'category',
          splitLine: { show: false }, // 刻度线
          axisTick: { // 分隔y轴下方小刻度线
            show: false
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: 'rgba(255, 255, 255, 1)',
              fontSize: 10
            }
          },
          data: [ '北京', '浙江', '湖南', '江西', '湖北', '江苏', '海南']
        },
        series: {
          name: this.title,
          type: 'bar',
          itemStyle: {
            normal: {
              color: function (params:any) { // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                var colorList = ['#64B9FC', '#81C784', '#E57373', '#369FF1', '#f1963b', '#ff4715', '#5072b8']
                return colorList[params.dataIndex]
              }
            }
          },
          data: [182, 234, 290, 104, 131, 630, 550].sort()
        }
      })
    }
  }
</script>

<style lang='less' scoped>
.pcBar {
  position: absolute;
  height: 2.7rem;
  width: 3.1rem;
  .title {
    height: .44rem;
    line-height: .44rem;
    padding-left: .2rem;
    font-size: .2rem;
    letter-spacing: 0;
    color: #00D3E3;
    background: rgba(0, 54, 115, .3);
  }
  .map {
    height: 2.2rem;
    width: 100%;
  }
}
</style>

 

转载于:https://my.oschina.net/lpcysz/blog/1819166

weixin_33827965
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echart统计图表
03-27
echart统计图表：饼状图，折线图，柱状图，echart所需js
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
Echarts是一款由百度开发的开源JavaScript图表库，它提供了丰富的可视化图表类型，包括但不限于饼图、折线图和柱状图。在这个项目中，Echarts与AJAX和Java后端结合，利用MySQL数据库来实现动态的数据展示。接下来，...
echarts占比环形图
qq_40576178的博客
03-03 2594
option = { backgroundColor: 'green', tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, graphic: { elements: [ { type: 'text', .
封装通用 ECharts 图表组件（三）：环形图实现
最新发布
m0_54340021的博客
05-28 1139
本文详细介绍了封装ECharts环形图组件的步骤和优势。环形图作为一种展示占比关系的有效图表，具有视觉上的吸引力。封装组件不仅可以提高代码复用率，简化维护工作，还能增强组件的灵活性。文章通过实例代码，展示了从引入依赖、创建Vue组件、定义数据、配置计算属性到样式定义的完整流程。计算属性pieOption是核心，它负责生成图表的颜色、网格、提示框和系列等配置。最终，封装后的组件能够在Vue项目中轻松复用，提升开发和维护效率。希望本文能帮助读者深入理解并实现自定义的ECharts组件。
echarts 环形图占比_环形图_仪表盘
aibujin的博客
04-24 3007
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、vue echarts
详解JavaScript模块化开发
maizi19900512的博客
10-26 370
什么是模块化开发？最早的时候，所有JavaScript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。<script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="1.js"> <scri
echarts环形占比图 环形百分比
localhost
06-28 1901
原文链接: https://blog.csdn.net/qq_47246331/article/details/119598704。
统计簇状柱形图折线图Excel模板.pdf
11-17
统计簇状柱形图折线图Excel模板.pdf
折线柱形图组合图Excel模板.pdf
11-16
折线柱形图组合图Excel模板.pdf
java实现各种数据统计图（柱形图，饼图，折线图）
08-30
它支持多种图表类型，如条形图（柱形图）、饼图、线图、散点图、面积图等，并且可以导出为各种格式，如JPEG、PNG、PDF等。`JFreeChart`的强大之处在于其灵活性和自定义能力，可以满足开发者对图表颜色、字体、标签等...
Excel模板9-漂亮折线柱形图Excel图表.zip
05-09
在Excel中，折线图和柱形图是两种非常常见的数据可视化工具，它们能有效地帮助我们理解和解释数据。本模板“9-漂亮折线柱形图Excel图表”旨在提供一个结合这两种图表类型的有效示例，以展示如何创建既美观又信息丰富...
Axure图表元件库（环比同比、环形、柱状、折线、饼状）
08-19
Axure元件库图表，其中包含环比同比图、环形图、柱状图、折线图、饼状图、综合统计图
echarts创建一个环形百分比图
qq_47246331的博客
08-11 1万+
echarts创建一个环形百分比图 效果如图： 实现这样一个环形百分比，基本type是使用的饼状图。 源码如下： const pieConf = { title: { text: '40%', left: 'center', top: 61.5, textStyle:{ color:'#1890fe' } }, visualMap: { show: false, }, series: [ { type: '
echarts圆角环形图
Bright2017的博客
12-10 1098
效果图： Demo演示地址：https://www.makeapie.com/editor.html?c=xptea0dZY5 完整代码： <template> <div> <polycyclicChart :series="polycyclicSeries"></polycyclicChart> </div> </template> import polycyclicChart ..
echarts圆环数据占比
qq_32615575的博客
06-30 3751
//圆形echarts占比 makeUpEcharts(el, makeUp_val) { let color = ['#EAF1FF', '#73A0FA'];//圆环两色 let echartData = [{ value: 100 - makeUp_val }, { value: makeUp_val } ]; let formatNumber = fu.
echarts圆环百分比图示
热门推荐
极简
05-18 3万+
一、效果图 二、代码 html<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="pieDiagram" class="floatLeft" style="height:400px;wid
echarts 圆形图、柱状图
weixin_30849403的博客
03-06 1091
首先引入echarts的js包 <script type="text/javascript" src="js/esl.js"></script> <script type="text/javascript" src="js/echarts.js"></script> 然后先准备一个容器，存放echarts画好的图，也就是定义一个存放...
echarts设置x轴的文字换行
hello world
10-14 3365
有时候文字长度过长，会导致某些值消失，所以设置换行能够解决 xAxis : [ { type : 'category', data : [], axisLabel: { show: true, textStyle: { color: '#000000', fontSize:'16' } }, axisLabel...
echarts 环形图
JunJiu0420的博客
05-16 268
【代码】echarts 环形图。
数据可视化：散点图、折线图、柱形图与地图应用解析
"该文档是关于统计图在实际应用中的说明，主要介绍了散点图、折线图、柱形图和地图这四种常见的统计图表及其应用场景。" 在数据分析和决策支持过程中，统计图起着至关重要的作用，它们能有效地帮助我们理解和解释...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值