纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

vue+echarts图表使用 vue+echarts图表使用的问题记录

青烟小生   2021-09-30 我要评论
想了解vue+echarts图表使用的问题记录的相关内容吗青烟小生在本文为您仔细讲解vue+echarts图表使用的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue中使用echarts,echarts表格,echarts图例下面大家一起来学习吧。

前言

echarts是我最常用的一直图表工具而且也是一个很完整的生态和内容足够我们平常的使用了。最近在做一个大数据平台的页面需要用到比较多的图表就使用了echarts。使用过程中也碰到了一些比较难搞的问题或者是配置手册里面隐藏比较深的一些属性今天就来记录下。

使用方法

1、取消图表的网格网格的颜色修改

// 控制网格线是否显示
splitLine: {
    show: false,   // 网格线是否显示
    //  改变样式
    lineStyle: {
       color: '#ccc'   // 修改网格线颜色     
    }                            
},

2、坐标轴的样式修改

xAxis: [
              {
                  type: 'category',
                  boundaryGap: false,
                  data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                  axisLine:{
                      lineStyle:{color:"#ccc"}
                  },
                  axisTick: {
                    show: false // 去掉刻度
                  },
                  axisLabel:{//字体样式的修改
                      show: true,//显示隐藏
                       textStyle:{color:"#ccc"}
                  },
                  // 控制网格线是否显示
splitLine: {
                 show: false,   // 网格线是否显示
                 //  改变样式
                 lineStyle: {
                     color: '#ccc'   // 修改网格线颜色     
                 }                            
},
              }
          ],
          yAxis: [
              {
                  type: 'value',
                  name: '(次)',
                  axisLine:{
                      lineStyle:{color:"#ccc",fontSize:'16'}
                  },
                  axisTick: {
                    show: false // 去掉刻度
                  },
              }
          ],

3、圆环图的一些样式修改或者配置使用

//圆环中心的文字的样式修改
title: {
          text: value.value+'次',
          subtext: value.name,
          x: 'center',
          y: 'center',
          itemGap: 0,
          textStyle: {
            fontSize: 26,
            fontWeight: 'bold',
            color: 'rgb(0,237,255)'
          },
          subtextStyle: {
            fontSize: 16,
            fontWeight: 'bold',
            color: '#fff'
          },
},
//圆环的鼠标移入的浮动效果清除
series: [
            {
              hoverAnimation:false,//添加这个属性
            }
    ]

4、多图表切换清除上一次加载的数据

在setOption里面加 true

option && myChart.setOption(option,true);

5、图表的渐变颜色使用

echarts.graphic.LinearGradient

series: [
          {
            type: 'pie',
            center: ['50%', '49%'],
            radius: ['45%', '73%'],
            // minAngle: 0,
            startAngle: 0, // 渐变角度
            avoidLabelOverlap: true,   //是否启用防止标签重叠
            emphasis: {
              label: {
                show: true,
                position: 'center'
              }
            },
            data: seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                label: {
                  show: true,
                }
              },
              normal: {
                color: function (params) { //颜色的渐变
                  var colorList = [
                    {
                      c1: '#3288FC',
                      c2: '#36B4FD'
                    },
                    {
                      c1: '#CBA0FF',
                      c2: '#598EFE'
                    },
                  ]
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                    offset: 0,
                    color: colorList[params.dataIndex].c1
                  }, {
                    offset: 1,
                    color: colorList[params.dataIndex].c2
                  }])

                }
              }
            }
          }
        ]

总结


相关文章

猜您喜欢

  • js跟随鼠标移动的图片 javascript实现跟随鼠标移动的图片

    想了解javascript实现跟随鼠标移动的图片的相关内容吗qq_39111074在本文为您仔细讲解js跟随鼠标移动的图片的相关知识和一些Code实例欢迎阅读和指正我们先划重点:js跟随鼠标移动图片,js跟随鼠标移动,js鼠标移动下面大家一起来学习吧。..
  • Python上课点名器 一起用Python做个上课点名器的制作过程

    想了解一起用Python做个上课点名器的制作过程的相关内容吗Dragon少年在本文为您仔细讲解Python上课点名器的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Python上课点名器,Python点名器下面大家一起来学习吧。..

网友评论

Copyright 2020 www.Shellfishsoft.com 【贝软下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式