vue 实现 【echarts中综合图表图例】的组件封装及调用

已于 2024-02-18 15:57:41 修改
阅读量1k 收藏 6
点赞数
分类专栏： echarts 文章标签： echarts vue.js 前端
于 2022-06-27 13:40:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50450473/article/details/125482248
版权

echarts组件使用参考：https://blog.csdn.net/weixin_50450473/article/details/121510438

目录

图例一

图例二

图例三

图例四

图例五

图例一：

图例二：

图例三：

图例四：

图例五：

图例一

let yData = ["张三", "李四", "张三", "李四", "张三", "张三", "李四", "张三"];
let surplus = [55, 88, 90, 93, 94, 90, 93, 94];
option = {
  backgroundColor:'#173565',
  legend: {
    data: ['分数', '排名'],
    x: 'right',
    y: '0%',
    itemGap: 30,
    orient: 'vertical',
    textStyle:{
      color: '#fff',
      fontSize: 15
    }
  },
  grid: {
    top: '2%',
    left: '0%',
    right: '0%',
    bottom: '0%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: yData,
    axisLabel: {
      fontSize: 10,
      color: '#fff'
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: true,
    axisLabel: {
      fontSize: 12,
      color: '#fff'
    },
    interval: 20, //间隔
    axisLine: {
      show: true
    },
    splitLine: {
      show: false
    }
  },
  series: [
    {
      name:'分数',
      data: surplus,
      type: 'bar',
      zlevel: 1, // 层级
      barWidth: 20,
      itemStyle: {
        color: function (params) {
          var colorList1 = ['#00EAD1', '#1AA67D','#00EAD1', '#1AA67D','#00EAD1', '#1AA67D','#00EAD1', '#1AA67D','#00EAD1', '#1AA67D'];
          var colorList2 = ['#0055CB', '#1AA67D','#0055CB', '#1AA67D','#0055CB', '#1AA67D','#0055CB', '#1AA67D','#0055CB', '#1AA67D'];
          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: colorList2[params.dataIndex] },
            { offset: 1, color: colorList1[params.dataIndex] }
          ])
        }
      },
      label: {
        normal: {
          position: 'top',
          show: true,
          color: '#fff',
          fontSize: 14,
          formatter: function (params) {
            return params.data
          }
        }
      }
    },
    {
      name: '排名',
      type: 'line',
      zlevel: 0, // 层级
      symbol: 'circle', //拐点样式
      symbolSize: 6, //拐点大小
      // 折线条的样式
      lineStyle: {
        color: '#fff',
        width: 1
      },
      // 折线拐点的样式
      itemStyle: {
        normal: { // 静止时：
          color: '#4CF8C5',
          borderColor: "#4CF8C5",//拐点的边框颜色
          borderWidth: 4
        },
        emphasis: { // 鼠标经过时：
          color: '#4CF8C5',
        }
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, .5, 0, 1, [
          {
            offset: 0,
            color: '#06B89C'
          },
          {
            offset: 1,
            color: '#374D6E'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 101, 134, 90]
    }
  ]
}

图例二

1、安装插件

水波纹参考地址：echarts-liquidfill - npm

坑：版本不对导致水波纹不法显示

解决：其中 echarts 版本5以上 和 echarts-liquidfill 版本3对应，echarts 版本5以下 和 echarts-liquidfill 版本2对应；此处 echarts@4.9.0 和 echarts-liquidfill@2.0.6 即可

npm install echarts@4.9.0 --save 
npm install echarts-liquidfill@2.0.6 --save

2、页面引入

import 'echarts-liquidfill'

3、option.js

let progress = 50;
let Colors = '71, 228, 229';
let proNum = 100;
option = {
  series: [
    {
      type: 'liquidFill',
      waveAnimation: 15,
      amplitude: 10,
      data: [progress, progress + 0.05, progress + 0.05],
      color: [
        {
          type: 'linear',
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 1,
              color: ['rgba(' + Colors + ',0.58)']
            },
            {
              offset: 0,
              color: ['rgba(' + Colors + ',0.2)']
            }
          ],
          global: false
        },
        {
          type: 'linear',
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 1,
              color: ['rgba(' + Colors + ',1)']
            },
            {
              offset: 0,
              color: ['rgba(' + Colors + ',0.8)']
            }
          ],
          global: false
        },
        {
          type: 'linear',
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 1,
              color: ['rgba(' + Colors + ',1)']
            },
            {
              offset: 0,
              color: ['rgba(' + Colors + ',0)']
            }
          ],
          global: false
        }
      ],
      radius: '85%',
      outline: {
        itemStyle: {
          borderWidth: 6,
          borderColor: 'rgba(' + Colors + ',1)'
        }
        // borderDistance: 0 // 取消缝隙
      },
      itemStyle: {
        opacity: 0.8, // 波浪的透明度
        shadowBlur: 0 // 波浪的阴影范围 设置为0不会出现底色为灰色的情况
      },
      label: {
        normal: {
          // insideColor: 'transparent', // 固定的文字颜色
          formatter: '\n'+'+proNum + '人', // 换行，设置位置
          fontSize: 16,
          color: '#fff'
        }
      },
      backgroundStyle: {
        color: 'transparent' // 水球未到的背景颜色
      }
    }
  ]
};

图例三

option = {
  xAxis: {
    type: 'category',
    data: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32]
    // boundaryGap: false,
  },
  yAxis: [
    {
      type: 'value',
      name: '℃',
      splitLine: {
        show: true
      }
    },
    {
      type: 'value',
      min: -1800,
      axisLabel: {
        show: true
      }
    }
  ],
  series: [
    {
      data: [
        1200, 1450, 1452, 1600, 1500, 120, 1611, 1600, 120, 1500, 1700, 1500,
        1200, 1200, 1600, 1200
      ],
      type: 'bar',
      stack: 'Total',
      markArea: {
        label: {
          color: '#333',
          fontSize: 15
        },
        data: [
          [
            {
              name: '热回收',
              xAxis: 0,
              itemStyle: {
                color: 'rgba(210,243,202,.5)'
              }
            },
            {
              xAxis: 3.4
            }
          ],
          [
            {
              name: '预热段',
              xAxis: 3.4,
              itemStyle: {
                color: 'rgba(226,212,233,.5)'
              }
            },
            {
              xAxis: 7
            }
          ],
          [
            {
              name: '加热段',
              xAxis: 7,
              itemStyle: {
                color: 'rgba(243,236,208,.8)'
              }
            },
            {
              xAxis: 12
            }
          ],
          [
            {
              name: '均热段',
              xAxis: 12,
              itemStyle: {
                color: 'rgba(249,230,245,.6)'
              }
            },
            {
              xAxis: 18
            }
          ]
        ]
      }
    },
    {
      name: 'Temperature',
      type: 'line',
      data: [
        1200, 1450, 1452, 1600, 1850, 1800, 1611, 1600, 120, 1500, 1700, 1500,
        1200, 1200, 1600, 1200
      ]
    },
    {
      name: '',
      type: 'bar',
      yAxisIndex: 1,
      itemStyle: {
        color: function (params) {
          var colorList;
          if (params.data >= 0) {
            colorList = '#5ccb81';
          } else {
            colorList = 'red';
          }
          return colorList;
        }
      },
      data: [100, 120, 30, 30, -20, -10, 0, -5, 6, 7, -8, 9, 10, 12, -40, -20]
    }
  ]
};

图例四

const dataList=[
  {
    heatNum:'1',
    steelGrade:'GL15544',
    datas: [
      [0,1500],
      [50,600],
      [100,1000],
      [150,800],
      [200,1600],
      [250,900],
      [300,1800]
    ]
  },
  {
    heatNum:'2',
    steelGrade:'GL15544',
    datas: [
      [350,600],
      [400,1000],
      [450,800],
      [500,1600],
      [550,900],
      [600,1800],
      [650,500]
    ]
  },
  {
    heatNum:'3',
    steelGrade:'GL15544',
    datas: [
      [700,600],
      [750,1100],
      [800,800],
      [850,1300],
      [900,900],
      [950,1800],
      [1000,600]
    ]
  }
]
option = {
  title:{
    text: '炉号：'+dataList[0].heatNum+'号炉      钢种：'+dataList[0].steelGrade
          +'                 炉号：'+dataList[1].heatNum+'号炉      钢种：'+dataList[1].steelGrade
          +'                 炉号：'+dataList[2].heatNum+'号炉      钢种：'+dataList[2].steelGrade,
    left:'6%',
    top:'3%'
  },
  grid:{
    top:'8%',
    left:'6%',
    right:'2%',
    bottom:'5%'
  },
  xAxis:[
    {
      type: 'value',
      show: false,
      max: 1000,
      position:'top'
    },
    {
      type: 'category',
      data: ['14:00:00','14:02:00', '14:04:00', '14:06:00', '14:08:00', '14:10:00',
      '14:12:00', '14:14:00', '14:16:00','14:18:00'],
      axisLine:{
        show:false
      },
      axisTick:{
        show:false
      }
    },
  ],
  yAxis: {
    type: 'value',
    max:1800,
    min:0,
    splitNumber:4,
    axisLabel: {
      formatter: '{value} ℃'
    },
    axisLine:{
      show:false
    },
    axisTick:{
      show:false
    }
  },
  visualMap:[
    {
      show:false,
      splitNumber:3,
      seriesIndex:0, // 指第几个图形
      pieces:[
        {
          gte:0,
          lte:1200,
          color:'red'
        },
        {
          gte:1200,
          lte:1500,
          color:'green'
        },
        {
          gte:1500,
          lte:1800,
          color:'red'
        }
      ]
    },
    {
      show:false,
      splitNumber:3,
      seriesIndex:1,
      pieces:[
        {
          gte:0,
          lte:1300,
          color:'red'
        },
        {
          gte:1300,
          lte:1600,
          color:'green'
        },
        {
          gte:1600,
          lte:1800,
          color:'red'
        }
      ]
    },
    {
      show:false,
      splitNumber:3,
      seriesIndex:2,
      pieces:[
        {
          gte:0,
          lte:800,
          color:'red'
        },
        {
          gte:800,
          lte:1100,
          color:'green'
        },
        {
          gte:1100,
          lte:1800,
          color:'red'
        }
      ]
    }
  ],
  series: [
    {
      type: 'line',
      smooth:false,
      data: [
        [0,1500],
        [50,600],
        [100,1000],
        [150,800],
        [200,1600],
        [250,900],
        [300,1800]
      ],
      markArea:{
        itemStyle:{
          color:'rgba(134,222,165,.4)'
        },
        data:[
          [{
            name:'1111',
            yAxis:1200,
            xAxis:0
          },{
            yAxis:1500,
            xAxis:300
          }]
        ]
      }
    },
    {
      type: 'line',
      smooth:false,
      data: [
        [350,600],
        [400,1000],
        [450,800],
        [500,1600],
        [550,900],
        [600,1800],
        [650,500]
      ],
      markArea:{
        itemStyle:{
          color:'rgba(134,222,165,.4)'
        },
        data:[
          [{
            name:'2222',
            yAxis:1300,
            xAxis:350
          },{
            yAxis:1600,
            xAxis:650
          }]
        ]
      }
    },
    {
      type: 'line',
      smooth:false,
      data: [
        [700,600],
        [750,1100],
        [800,800],
        [850,1300],
        [900,900],
        [950,1800],
        [1000,600]
      ],
      markArea:{
        itemStyle:{
          color:'rgba(134,222,165,.4)'
        },
        data:[
          [{
            name:'3333',
            yAxis:800,
            xAxis:700
          },{
            yAxis:1100,
            xAxis:1000
          }]
        ]
      }
    }
  ]
};

图例五

let datas = [
  { name: '余装定理', diffic: 'D', master: 65, num: 7 },
  { name: '三角形边长', diffic: 'B', master: 75, num: 9 },
  { name: '三角形面积', diffic: 'A', master: 52, num: 2 },
  { name: '三角形对角', diffic: 'C', master: 55, num: 5 },
  { name: '勾股定理', diffic: 'A', master: 70, num: 6 }
];
const colorList = ['#a7d691', '#f18585', '#fbd379', '#8fcde5'];
let className = ['A', 'B', 'C', 'D'];
let xName = [];
let series = [];
datas.forEach((da) => {
  xName.push([da.name, da.master, da.diffic, da.num]);
});
className.forEach((cl) => {
  series.push(
    {
    type: 'line',
    smooth: true,
    data: datas.map((m) => {
      return m.master;
    }),
    color: '#999',
    label: {
      show: true,
      position: 'center',
      padding: [15, 0, 0, -10],
      formatter: function (value) {
        return value.data + '%';
      }
    }
  },
  {
    name: cl,
    type: 'scatter',
    symbol: 'pin', //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
    symbolSize: function (data) {
      return data[3] * 10;
    },
    symbolColor: 'red',
    itemStyle: {
      normal: {
        color: function (data) {
          if (data.data[2] === 'A') {
            return colorList[1];
          } else if (data.data[2] === 'B') {
            return colorList[2];
          } else if (data.data[2] === 'C') {
            return colorList[3];
          } else if (data.data[2] === 'D') {
            return colorList[0];
          }
        }
      }
    },
    label: {
      show: true,
      color: '#000',
      formatter: function (value) {
        return value.data[3] + '题';
      },
    },
    data: xName
  });
});

option = {
  textStyle: {
    color: '#666'
  },
  yAxis: {
    name: '掌握率（%）',
    max: 100,
    min: 0,
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    },
    scale: false
  },
  xAxis: {
    name: '知识点',
    data: datas.map((m) => {
      return m.name;
    })
  },
  color: colorList,
  legend: {
    show: true,
    top: 0,
    itemGap: 30,
    data: className
  },
  series: series
};

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

禾小毅
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-charts, 用于 Vue.js的Google图表插件.zip
09-18
vue-charts, 用于 Vue.js的Google图表插件 的vue图表 用于 Vue.js的Google图表插件演示基本折线图多组数据，带有自动更新功能。事件在窗口大小调整窗口上重新绘制重画安装npm install --save-dev vue-chart
vue 封装的 echarts 组件
03-05
vue 封装的 echarts 组件，主要传递四个参数到组件中，title、legend、series、xAxis，分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用，数据被覆盖问题解决办法。
Vue怎么使用Echarts创建图表
丫头
03-05 743
摘要：在后台管理系统中，我们经常会遇到图表，比如说：柱形图，饼状图，折线图，雷达图等等，而用来写图表插件有很多，我这里主要介绍Echarts在项目里怎么使用，官网地址如下：https://echarts.baidu.com/index.html，详细信息请阅览他们的官网文档和实例，各种图表都比较完善。 本文流程： 1.安装插件→2.引入Echarts→3.创建图表→4.修改样式→5....
在vue3中用echart绘制一个折线图,完全小白复制即可用。
weixin_44780502的博客
02-26 618
在一点都不了解的情况下,vue3使用echart绘制一个折线图,小白复制可用.
Vue如何使用echarts插件，以及简单的 柱形图 折线图 饼图 多列柱形图案例
GongWei_的博客
03-03 680
1、安装 npm install echarts --save 2、引入 全局引入在main.js文件引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts 按需引入 // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。 import * as echarts from 'echarts/core'; // 引入柱状图图表，图表后缀都为 Chart import { BarChart
Vue中如何进行图表绘制
程序员徐师兄的博客
06-11 2786
数据可视化是Web应用中非常重要的一部分，其中图表绘制是其中的重要环节。Vue作为一款流行的前端框架，提供了很多优秀的图表库，以满足不同业务场景下的需求。本文将介绍如何在Vue中进行图表绘制，包括使用Vue插件和使用第三方图表库。
vue中添加echarts图表插件的方法
吉仔饼的博客
05-16 1785
1、使用npm添加package.json文件中的配置并下载相关npm包依赖 npm install echarts --save 下载完成之后会在package.json中添加如下配置： 2、在项目文件的入口js文件main.js中引入echarts，并使用该插件，这样就可以对其进行全局使用 import echarts from 'echarts' Vue.use(echar...
vue2.0_在vue中使用echarts图表插件
QiuRenBB的博客
02-15 9065
说明：本例子基于vue-cli脚手架搭建 首先，安装echarts依赖 npm install echarts -S 注：安装NodeJS之后，使用npm来安装包使用的是国外的地址，经常会出现超时错误，这时可以通过修改为国内的淘宝镜像来加速安装。 //淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 在main.js中全局引入 //引入echarts import echarts from 'echarts' //vu
2023vue2用vue-echarts实现图表
feeeee889的博客
10-11 3308
⚡按照本文章的步骤，最终可实现官方的各种图表。
VUE图表绘制，选用哪种可视化组件好？VUE饼图柱图使用范例
泯灭于众生，高歌于孤夜！
04-19 6943
最近一个项目中使用了VUE，并需要绘制图表，这就尴尬了，搜查了很多资料，发现网上使用的有：npm-c3，v-charts，sChart，D3等等多种多样，经过至少不下5中可视化组件尝试，发现最好用的还是Echarts。 主要原因： 1.有官方实例和API，资源丰富，遇到问题可快速解决 2.支持图标类型多样化，能满足项目扩展需求 3.图表操作灵活，配置项可封装，自由度高 废话少说，直接上代...
Vue3中使用echart插件
qq_41858327的博客
12-21 470
Vue3中使用echart插件
基于Vue2 和ECharts5封装的组件解决图表配置繁琐，使代码更整洁.zip
06-15
基于Vue2 和ECharts5封装的组件解决图表配置繁琐，使代码更整洁 组件介绍： <charts/> 基础组件，主要用于生成布局和图表。 <charts-legend/> 图例组件，主要用于生成图表的图例， 配置项 。 <charts-series/> ...
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
vue.js如何将echarts封装为组件一键使用详解
10-19
Echarts 、 Remodal和Pikaday是我们在开发后台管理类网站时常用的三个第三方组件，下面这篇文章主要给大家介绍了关于vue.js如何将echarts封装为组件一键使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友...
Vue 之 echarts 图表数据可视化常用的一些图表动态图表3D图表的简单整理
08-05
相关说明地址： vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
element-ui的bug记录
nick_zhang的博客
04-29 395
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 212
注释很详细，直接上代码……
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 500
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
vue2echarts组件封装
08-25
Vue2Echarts是一个用于在Vue.js中封装和使用ECharts图表库的组件。下面是一个简单的示例： 首先，你需要安装Vue2Echarts库： ```bash npm install vue-echarts echarts --save ``` 接下来，在你的Vue组件中引入所...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值