Echarts常用图表

最新推荐文章于 2024-05-28 11:11:34 发布
最新推荐文章于 2024-05-28 11:11:34 发布
阅读量1.4k 收藏 5
点赞数
分类专栏： Web前端 Echarts图表 文章标签： Echarts图表绘制
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38974419/article/details/104182547
版权

1.折线图：

(1).代码：

const self = this
let chart = echarts.init(self.$refs.chart)
// 数据
let date = ['1-22', '1-23', '1-24', '1-25', '1-26', '1-27', '1-28', '1-29', '1-30', '1-31', '2-1', '2-2', '2-3', '2-4']
let total = [26, 28, 33, 61, 51, 19, 16, 35, 70, 88, 97, 103, 142, 114]
let inflow = [12, 8, 13, 29, 33, 10, 7, 11, 30, 35, 37, 46, 49, 51]
let outflow = [14, 20, 20, 32, 18, 9, 9, 24, 40, 45, 60, 57, 93, 63]
// 配置
let option = {
  title: {
    text: '全省人口流动趋势图',
    textStyle: {
      fontWeight: 400,
      fontSize: 14,
      fontFamily: 'PingFangSC-Regular,PingFang SC',
      color: 'rgba(70,81,102,1)',
      lineHeight: 20
    },
    left: '-5',
    top: '-5'
  },
  tooltip: {
    show: false
    // trigger: 'axis',
    // axisPointer: {
    //   lineStyle: {
    //     color: '#57617B'
    //   }
    // }
  },
  legend: {
    icon: 'rect',
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 13,
    data: ['流入流出合计', '流入', '流出'],
    textStyle: {
      fontSize: 12,
      color: 'rgba(70,81,102,1)',
    },
    top: '12%',
    right: '0'
  },
  grid: {
    left: '0',
    right: '4',
    bottom: '0',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    boundaryGap: false,
    axisLine: {
      lineStyle: {
        color: '#A5AAB3'
      }
    },
    axisLabel: {
      rotate: 70,
    },
    axisTick: {
      show: false
    },
    data: date
  }],
  yAxis: [{
    type: 'value',
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      margin: 10,
      textStyle: {
        fontSize: 12
      },
      color: '#A5AAB3'
    },
    splitLine: {
      lineStyle: {
        color: '#A5AAB3'
      }
    }
  }],
  series: [{
    name: '流入流出合计',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 5,
    showSymbol: false,
    lineStyle: {
      normal: {
        width: 1
      }
    },
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(168, 232, 236, 0.9)'
        }, {
          offset: 1,
          color: 'rgba(168, 232, 236, 0)'
        }], false),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10
      }
    },
    itemStyle: {
      normal: {
        color: 'rgb(168, 232, 236)',
        borderColor: 'rgba(168, 232, 236)',
        borderWidth: 12

      }
    },
    data: total
  }, {
    name: '流入',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 5,
    showSymbol: false,
    lineStyle: {
      normal: {
        width: 1
      }
    },
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(233, 127, 147, 0.9)'
        }, {
          offset: 1,
          color: 'rgba(233, 127, 147, 0)'
        }], false),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10
      }
    },
    itemStyle: {
      normal: {
        color: 'rgb(233, 127, 147)',
        borderColor: 'rgba(233, 127, 147)',
        borderWidth: 12

      }
    },
    data: inflow
  }, {
    name: '流出',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 5,
    showSymbol: false,
    lineStyle: {
      normal: {
        width: 1
      }
    },
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(238, 158, 114, 0.9)'
        }, {
          offset: 1,
          color: 'rgba(238, 158, 114, 0)'
        }], false),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10
      }
    },
    itemStyle: {
      normal: {

        color: 'rgb(238, 158, 114)',
        borderColor: 'rgba(238, 158, 114)',
        borderWidth: 12
      }
    },
    data: outflow
  }]
}
chart.setOption(option, true)

(2).效果截图（数据均为模拟数据）：

2.饼图：

(1).代码：

        const self = this
        let chart = echarts.init(self.$refs.chart)
        let color = ['#E15822', '#FFB061', '#FFDDBB', '#00D3AE', '#7E7E7E']
        let option = {
          title: {
            text: '病情分布',
            x: 'center',
            y: 'center',
            textStyle: {
              color: '#465166',
              fontSize: 14,
              fontWeight: '400',
              fontFamily: 'PingFangSC-Regular,PingFang SC'
            }
          },
          tooltip: {
            show: true,
          },
          series: [{
            name: '病情分布',
            type: 'pie',
            radius: [30, 55],
            center: ['50%', '50%'],
            roseType: 'radius',
            color: color,
            label: {
              normal: {
                formatter: function (params) {
                  return params.data.name + ' ' + params.data.value + ' ' + '例'
                }
              },
            },
            data: [{
              name: '危症',
              value: 23
            }, {
              name: '重症',
              value: 41
            }, {
              name: '平稳',
              value: 63
            }, {
              name: '治愈',
              value: 12
            }, {
              name: '死亡',
              value: 2
            }]
          }]
        }
        chart.setOption(option, true)

(2).效果截图（数据均为模拟数据）：

3.环形图：

说明：这个例子来源于https://gallery.echartsjs.com/editor.html?c=xByzFvaw1M，用的时候可以做一下修改。

(1).代码：

        let scale = 1;
        let echartData = [{
          value: 2154,
          name: '曲阜师范大学'
        }, {
          value: 3854,
          name: '潍坊学院'
        }, {
          value: 3515,
          name: '青岛职业技术学院'
        }, {
          value: 3515,
          name: '淄博师范高等专科'
        }, {
          value: 3854,
          name: '鲁东大学'
        }, {
          value: 2154,
          name: '山东师范大学'
        }]
        let rich = {
          yellow: {
            color: "#ffc72b",
            fontSize: 30 * scale,
            padding: [5, 4],
            align: 'center'
          },
          total: {
            color: "#ffc72b",
            fontSize: 40 * scale,
            align: 'center'
          },
          white: {
            color: "#fff",
            align: 'center',
            fontSize: 14 * scale,
            padding: [21, 0]
          },
          blue: {
            color: '#49dff0',
            fontSize: 16 * scale,
            align: 'center'
          },
          hr: {
            borderColor: '#0b5263',
            width: '100%',
            borderWidth: 1,
            height: 0,
          }
        }
        let option = {
          title: {
            text:'总考生数',
            left:'center',
            top:'53%',
            padding:[24,0],
            textStyle:{
              color:'#fff',
              fontSize:18*scale,
              align:'center'
            }
          },
          legend: {
            selectedMode:false,
            formatter: function(name) {
              let total = 0; //各科正确率总和
              let averagePercent; //综合正确率
              echartData.forEach(function(value, index, array) {
                total += value.value;
              });
              return '{total|' + total + '}';
            },
            data: [echartData[0].name],
            // data: ['高等教育学'],
            // itemGap: 50,
            left: 'center',
            top: 'center',
            icon: 'none',
            align:'center',
            textStyle: {
              color: "#fff",
              fontSize: 16 * scale,
              rich: rich
            },
          },
          series: [{
            name: '总考生数量',
            type: 'pie',
            radius: ['42%', '50%'],
            hoverAnimation: false,
            color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
            label: {
              textStyle: {
                fontSize: 12
              },
              normal: {
                formatter: function(params, ticket, callback) {
                  let total = 0; //考生总数量
                  let percent = 0; //考生占比
                  echartData.forEach(function(value, index, array) {
                    total += value.value;
                  });
                  percent = ((params.value / total) * 100).toFixed(1);
                  return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
                },
                rich: rich
              },
            },
            labelLine: {
              normal: {
                length: 55 * scale,
                length2: 0,
                lineStyle: {
                  color: '#0b5263'
                }
              }
            },
            data: echartData
          }]
        };
        chart.setOption(option, true)

(2).效果截图（数据均为模拟数据）：

 

Willard_zhang
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts图表使用
laughing
04-21 180
echarts是一款纯js的图标库，兼容pc，移动端，一款可视化报表； 使用流程 1，到时候js库 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min....
echarts图表的使用
yungpheng的博客
11-10 7897
一、介绍 ECharts，一个纯 Javascript 的图表库，可以流畅的运行在PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。 ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，
echarts常用饼图、圆环图、漏斗图示例
热门推荐
m0_51431448的博客
04-04 1万+
最近做可视化比较多，就常用的图表类型做了一下总结。 因为做可视化的图表代码量非常大，所以会把echarts图表单独抽离出来，封装成一个组件，也可以复用，所以这里我直接把封装的组件直接放在这里，是可以直接拿来用的，根据所需稍作修改即可。 这里都是用的vue3，其实和vue2差不多，各式各样的花里胡哨的图表无非就是option配置不同，如果使用的是vue2，在写法上稍作修改即可 vue2、vue3组件封装模板链接echarts图表组件封装模板 1. 精简圆环图 <template&g...
ECharts常用图表 雷达图、仪表盘图
黑马程序员官方博客
12-12 1434
另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~仪表盘可以更直观的表现出某个指标的。的数据与标准数据的对比情况。是一个空空如也的对象。雷达图绘制类型，支持。是一个空空如也的对象。定义各个维度的最大值。
echarts(7大基础图表)的使用
最新发布
qq_44930306的博客
05-28 1532
echarts基础应用
数据可视化 -- ECharts 入门
m0_63260018的博客
09-19 2885
ECharts（全称“EchoCharts”）是一个开源的、纯JavaScript实现的图表库，由百度前端团队（EFE）以及社区贡献者共同维护和开发。它提供了一整套丰富的图表类型，包括折线图、柱状图、饼图、雷达图、散点图、地图、热力图、箱线图等，用于各种数据可视化需求。
echart图表合集
m0_57997609的博客
11-03 4786
echarts--------柱状图（x轴为两个模块数据版本，柱子顶部自定义背景图加自定义数据）最近做个项目运用大量echarts图表特此记录一下，以备后面不时之需！echarts-------仪表图（双指针 两个数据）echarts-------------横向进度条。echarts-----饼状图（颜色渐变）样式图片如下后续可根据自己需要按需修改。1，2，3 echarts图表代码。echarts--------水球图。echarts------环形图表。echarts-仪表速度图。
Echarts常见图表展示
懒羊羊我小弟的博客
07-31 1498
本文主要介绍Echarts常见图表的展示，主要以折线图、柱状图、饼图、散点图等
Vue 之 echarts 图表数据可视化常用的一些图表动态图表3D图表的简单整理
08-05
相关说明地址： vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
Echarts常用案例
07-22
本压缩包“Echarts常用案例”可能包含了一系列使用ECharts实现的典型应用示例，旨在帮助开发者更好地理解和运用ECharts进行数据展示。 ECharts的核心知识点包括： 1. **基本概念**：ECharts图表主要由容器（chart...
ECharts 产品图表系统 v4.0.1
11-26
ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图
ECharts JSP常用图表制作系统 v4.2.0 rc2
10-07
ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图
ECharts 产品图表系统 v3.8.4
11-27
ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图
数据可视化ECharts的常用图表，看完就会用(2)
zag666的博客
03-31 7369
ECharts七大常用图表：柱状图、折线图、散点图、饼图、地图、雷达图、仪表盘图 本文主要介绍后四个图表， 文章目录四、饼图五、地图六、雷达图 四、饼图 饼图的数据是由name和value组成的字典所形成的数组；饼图无须配置xAxis和yAxis。 特点：饼图可以很好地帮助用户快速了解不同分类的数据的占比情况。 var pieData = [ { name: '淘宝', value: 11231 }, { name: '京东', value: 22673 },
ECharts数据可视化--常用图表类型
小马哥的博客
03-10 1万+
数据可视化
一、ECharts(各种统计图)
yuzheh521的博客
06-12 2241
一、ECharts 1、简介 ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 官方网站：https://echarts.baidu.com/ 2、基本使用 入门参考：官网->文档->教程->5分钟上手ECha
pyecharts可视化作图1：基金净值-折线图
mhmh123789的博客
12-01 319
pyecharts可视化，python，基金净值
python：pyecharts 画基金净值 月K线图
belldeep的专栏
03-02 518
我想在本地（PC)画出 基金净值 月K线图，不想每次看图都需联网。
ECharts详细说明
10-27 6181
简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、...
echarts设置图表位置
05-17
Echarts 可以通过设置图表容器的位置来控制图表的位置。常用的设置图表位置的方法有以下几种： 1. 设置容器的 CSS 样式：可以通过设置容器的 `position`、`left`、`top`、`width` 和 `height` 等属性来控制容器的位置和大小。 ```html <div id="chart" style="position: absolute; left: 100px; top: 100px; width: 600px; height: 400px;"></div> ``` 2. 使用 Echarts 提供的 API：Echarts 提供了 `setOption` 方法用于设置图表的配置项，其中可以通过 `grid` 属性来设置图表的位置和大小。 ```javascript var myChart = echarts.init(document.getElementById('chart')); myChart.setOption({ grid: { left: '10%', right: '10%', top: '20%', bottom: '20%', containLabel: true }, // 其他配置项 }); ``` 3. 动态设置容器的大小：可以通过 JavaScript 代码动态设置容器的大小来控制图表的位置和大小。 ```javascript var container = document.getElementById('chart'); container.style.width = '600px'; container.style.height = '400px'; ``` 以上是常用的设置图表位置的方法，具体使用哪种方法可以根据实际需求来选择。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值