【Vue】20.vue项目中引入echarts图表遇到的问题

最新推荐文章于 2023-12-23 15:24:11 发布
最新推荐文章于 2023-12-23 15:24:11 发布
阅读量4.9k 收藏 9
点赞数
分类专栏： 【Vue】 文章标签： vue ECharts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/benben513624/article/details/89551070
版权

最近做一个公众号有需求是要添加一个图表，自己调查了一下，决定使用ECharts，在vue项目中引入ECharts，由于第一次做图表，还要跟UI设计图保持一致，也是遇到了好多样式问题，在这里做一下总结。

效果图如下：

ECharts官方Docs

ECharts官方Example

ECharts附录一按需引入ECharts图表和组件

一.安装插件

npm install echarts --save

二.在当前页面中按需引入模块

  const echarts = require('echarts/lib/echarts');
  // require('echarts/lib/chart/bar');
  require('echarts/lib/chart/line');
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/markPoint');
  require('echarts/lib/component/title');
  require('echarts/lib/component/axisPointer');

三.在mounted()方法里面加载该折线图

mounted(){
  this.drawLine();
}
methods: {
   drawLine() {
        const that = this;
        this.myChat = echarts.init(document.getElementById('myChat'));
        this.myChat.setOption({
          tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              axis: 'auto',
              lineStyle: {
                color: '#F78600',
                z: 0,
                symbolSize: 2,
              },
              label: {
                show: true,
                color: '#F78600',
                backgroundColor: '#FFFFFF',
                formatter() {
                  return '';
                },
              },
            },
            borderColor: '#FFFFFF',
            formatter(params) {
              return `<div style="z-index: 10; height: 10px; line-height: 10px; text-align: center; font-size: 12px">${params[0].seriesName} ${params[0].value}%<div/>`;
            },
            backgroundColor: '#F78600',
            showContent: true,
          },
          legend: {
            data: ['平均温度'],
          },
          grid: {
            top: 35,
            x2: 30,
            y2: 10,
          },
          calculable: true, // 提示框消失
          xAxis: {
            position: 'top',
            type: 'category',
            data: ['-5岁', `${that.info.age}岁`, '+5岁', '+10岁', '+15岁', '+20岁', '+25岁'],
            axisPointer: {
              type: 'line',
              snap: false,
              label: {
                color: '#F78600',
                backgroundColor: '#FFFFFF',
                shadowColor: '#FFFFFF',
                formatter(params) {
                  return `${params.value}`;
                },
              },
              lineStyle: {
                type: 'solid',
              },
              triggerTooltip: true,
            },
            backgroundColor: '#F78600',
            boundaryGap: false,
            gridIndex: 0,
            // 坐标轴刻度标签的相关设置
            axisLabel: {
              color: '#9EA0AA',
              fontSize: 10,
              interval: 'auto',
            },
            // 坐标轴轴线相关设置
            axisLine: {
              show: false,
            },
            // 刻度线
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            // 网格线
            splitLine: {
              show: true,
              lineStyle: {
                // width: 1,
                type: 'dotted',
                color: '#EEEEEE',
              },
            },
          },
          yAxis: [
            {
              show: false, // 是否显示Y轴
              scale: true, // 只在数值轴中有效
              // position: 'right', // 坐标轴显示的位置
              type: 'value',
              name: '温度',
              min: that.dataArrMin - 10,
              max: that.dataArrMax + 10,
              interval: 1,
              axisLabel: {
                formatter: '{value}%',
              },
            },
          ],
          series: [
            {
              name: '现在',
              type: 'line',
              stack: '总量',
              smooth: true, // 曲线平滑true
              // symbol: 'circle',
              symbolSize: 4,
              showSymbol: false,
              hoverAnimation: false,
              z: 20,
              markPoint: {
                z: 1000,
                symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z',
                showSymbol: true,
                itemStyle: {
                  color: '#939393',
                  opacity: 0.5,
                  width: 74,
                  height: 32.4,
                  borderRadius: 50,
                  z: 1000,
                },
                symbolSize: [25, 20], // 容器大小
                symbolOffset: [0, -10], // 位置偏移
                label: {
                  position: 'insideTop',
                  distance: 4,
                  offset: [0, -2],
                  color: '#ffffff',
                  fontSize: 10,
                  textBorderRadius: 10,
                  formatter(params) {
                    return `${params.value}%`;
                  },
                },
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'},
                ],
              },
              itemStyle: {
                normal: {
                  areaStyle: {
                    z: 10,
                    type: 'default',
                    // 渐变色实现
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                      // 变化度
                      // 三种由深及浅的颜色
                      [{
                        offset: 0,
                        color: '#FFE8BF',
                      },
                        //   {
                        //   offset: 0.5,
                        //   color: '#FFFFFF',
                        // },
                        {
                          offset: 1,
                          color: '#FFFFFF',
                        }]),
                  },
                  lineStyle: { // 线的颜色
                    width: 1,
                    type: 'solid',
                    color: '#F78600',
                  },
                  label: {
                    show: false,
                    position: 'top',
                    textStyle: {
                      color: '#F78600',
                    },
                  },
                  color: '#FFFFFF',
                  borderColor: '#F78600',
                  borderWidth: 1,
                },
              },
              areaStyle: {
              },
              data: that.dataArr,
            },
          ],
        });
        window.addEventListener('resize', this.myChat.resize);
        this.myChat.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: 1,
          z: 0,
        });
      },
}

四.图表的一些样式问题

(1)ECharts X轴固定在上方

          xAxis: {
            position: 'top',
            }

(2)ECharts line动态刷新数据 

data: 动态接口数据

(3)ECharts tooltip提示框

tooltip ={                                      //提示框组件
    trigger: 'item',                            //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
    triggerOn:"mousemove",                      //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
    showContent:true,                           //是否显示提示框浮层
    alwaysShowContent:true,                     //是否永远显示提示框内容
    showDelay:0,                                  //浮层显示的延迟，单位为 ms
    hideDelay:100,                                //浮层隐藏的延迟，单位为 ms
    enterable:false,                             //鼠标是否可进入提示框浮层中
    confine:false,                               //是否将 tooltip 框限制在图表的区域内
    transitionDuration:0.4,                      //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
    position:['50%', '50%'],                    //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
    formatter:"{b0}: {c0}<br />{b1}: {c1}",     //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
    backgroundColor:"transparent",            //标题背景色
    borderColor:"#ccc",                        //边框颜色
    borderWidth:0,                              //边框线宽
    padding:5,                                  //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
    textStyle:mytextStyle,                     //文本样式
};

(4)ECharts 初始化的时候显示tooltip提示框

        window.addEventListener('resize', this.myChat.resize);
        this.myChat.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: 1,
          z: 0,
        });

(5)图表高度调整

动态获取的数据，如果数组高度不一样，就会导致图表的高度不一致，怎么调整呢？

    //直角坐标系内绘图网格                    
                    grid : {
                        left : '3%',   //组件离容器左侧的距离
                        right : '4%',
                        bottom : '0%',
                        containLabel : true     //grid 区域是否包含坐标轴的刻度标签
                    },

(6) tooltip提示框 自定义小圆点(颜色，形状和大小等等),同理，要改变小圆点儿形状，重写html片段即可。

 formatter: function(params) {
　　var result = ''
　　var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>'
　　params.forEach(function (item) {
　　　　result += item.axisValue + "</br>" + dotHtml + item.data
　　})
　　return result
}

(7)ECharts 折线图美化(颜色渐变，背景透明，隐藏坐标轴)

参考：https://blog.csdn.net/Changeable0127/article/details/81333559

(8)ECharts 折线图折线平滑以及实现填充背景色渐变

参考：https://blog.csdn.net/u012998306/article/details/88689370

(9)ECharts 柱状图或者折线图顶端显示数据

在series如果已经有itemStyle就在她里面添加position: 'top'

series : [ {
 
			name : '',
			type : 'bar',
			barWidth : '50%',
			itemStyle : {
				normal : {
					label: {
				          show: true,
				          position: 'top',
				          textStyle: {
				            color: 'white'
				      }
				   }
				},
			},
			data : seriesDataArray
		} ]

(10)实现折线图的拐点为空心圆圈

我们看官网提供的是拐点处都是实心的圆，而且圆内部填充的颜色与legend颜色一致，只要把圆的背景颜色填充成背景色，圆圈的border跟折线的颜色一致

   series[{
      symbol: 'circle',
      itemStyle: {
        normal: {
            color: "#000",
            borderColor: '#f58f23',
            borderWidth: 1,
        }
      },    
   }]

(11)修改折线的颜色和折线的点的大小的方法

series: [{                            

                            type: 'line',
                            showSymbol: true,
                            symbol: 'circle',     //设定为实心点
                            symbolSize: 20,   //设定实心点的大小
                            hoverAnimation: false,
                            animation: false,
                            data: dataa,                          
                            markPoint: {     //显示一定区域内的最大值和最小值
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            }]

(12)ECharts折线图取消折线上圆点，设置线条为虚线，series-->symbol:'none'取消折线上的圆点

​
series: [{
        itemStyle:{
            normal:{
                lineStyle:{
                    width:2,
                    type:'dotted' //设置线条为虚线
                }
            }
        }, 
        data: data,
        type: 'line'
        
    }]

(13)ECharts markPoint显示问题

参考：https://blog.csdn.net/m0_38069630/article/details/80921801

(14)markPoint气泡大小及修改气泡中字体颜色

markPoint : {
	          		// symbolSize: 80,控制气泡大小
	          		itemStyle:{
	          			 normal:{
	          				label:{ 
	          					show: true,  
                                color: '#000000',//气泡中字体颜色
	          				}
	          			 }
	          		},
	                data : [
	                    {type : 'max', name: '最大值'},
	                    {type : 'min', name: '最小值'}
	                ]
	            }

(15)关于移动端如何实现ECharts折线图默认展示高亮数据点的解决办法

参考：https://my.oschina.net/u/3983353/blog/2218887

Anabel Chen
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue文件中使用echarts.js的两种方式
10-17
2. 在`WelcomePage.vue`中引入ECharts及相关图表类型： ```javascript // 引入基本模板，按需加载 let echarts = require('echarts/lib/echarts'); // 引入柱状图 require('echarts/lib/chart/bar'); // 引入...
解决vue⼀个页面中复用同⼀个echarts组件的问题
qq_52337177的博客
06-15 1021
解决vue⼀个页面中复用同⼀个echarts组件的问题
vue-echarts设置了title不显示
盏茶作酒的博客
04-20 1329
使用vue-echarts船舰的图标组件，图可以显示，标题不显示是怎么回事，官方的例子 使用vue-echarts船舰的图标组件，图可以显示，标题不显示是怎么回事，官方的例子 <template> <div class="map"> <h1></h1> <v-chart :options="datas" /> </div> </template> <script> import 'e
vue 中使用echarts的title富文本不生效,解决办法
qq_37957866的博客
05-24 7363
这里看文档有点坑啊，页面 <el-col class="chart-area" :span="8"> <div class="box chart"> <ve-histogram :title="chartTitle" :data="chartData" :settings="chartSettings">&lt...
VUE工作笔记3--引入echarts
tansy_big_rabbit的博客
10-14 176
下载：npm install echarts --save npm install -g cnpm --registry=https://registry.npm.taobao.org 按需引入echarts模块： 在src下创建echarts文件夹，创建echarts.js: // 引入 ECharts 主模块 var echarts = require('echarts/lib/...
在Vue中使用echarts时遇到的问题总结
彳亍的博客
10-10 2273
怎么引入echarts就不多说了，首先引入echarts，在初始化，配置参数 1：echarts环形图： 关于legend样式重写：通过formatter属性和textStyle进行修改样式，具体参考这篇文章：https://www.jianshu.com/p/f4338c76b169 环形图环内文字如何居中：1：在series里面的label下设置formatter属性；2：自定义一个...
完美解决vue 中多个echarts图表自适应的问题
10-15
在Vue项目中，ECharts图表的自适应是一个常见的需求，特别是在页面中存在多个图表的情况下。以下将详细解析如何解决Vue中多个ECharts图表的自适应问题。 首先，我们需要理解ECharts图表的自适应原理。ECharts图表的...
vue 项目引入echarts 添加点击事件操作
10-14
总结，本文主要介绍了在Vue项目中引入ECharts并添加点击事件监听器的步骤，以及如何利用Vue Router的路由守卫实现用户权限控制。这些技术在实际开发中非常实用，能帮助构建安全、功能丰富的Web应用。
在vue项目中引入highcharts图表的方法(详解)
08-27
在 Vue 项目中引入 Highcharts 图表的方法详解 在 Vue 项目中引入 Highcharts 图表是一种常见的需求，Highcharts 是一个功能强大且灵活的图表库，可以生成各种类型的图表，如柱状图、折线图、饼图等。下面我们将...
vue 中使用 echarts
最新发布
weixin_45825057的博客
12-23 910
在vue中使用echarts
vue 中echarts的使用
看风听雨
10-30 673
在项目项目中,需要用到图表echarts,在这就不做解释了,只是把项目中用到的echarts记录一下 echarts官方地址:https://www.echartsjs.com/zh/index.html echarts w3c文档:https://www.w3cschool.cn/echarts_tutorial/ vue-echarts:https://v-charts.js.or...
vue项目中使用Echarts
m0_46364033的博客
01-13 369
首先看一下我页面所需展示的样子，如下： 最开始的时候呢，我先去官网(http://echarts.apache.org/zh/index.html)稍作了解，然后转战到看其他大佬的做法，后面选了一个代码齐全的（(https://www.cnblogs.com/ldlx-mars/p/7815328.html)），直接复制了下来，但是呢和我自己需要的echarts类型、所需数据以及主题颜色都不对口，这个代码呢就是把官网上的给一样搞下来了，但是其中一些东西就要自己去动动手指改改了。 正式步骤来了： 做一个自
echarts官网打不开。
Chen__Hui的博客
03-15 5155
echarts网站访问不了
手把手教你在vue中使用Echarts
weixin_47930667的博客
09-23 723
首先NPM 安装 ECharts 你可以使用如下命令通过 npm 安装 ECharts npm install echarts --save 在需要ECharts的页面上，script里面引入 ECharts（有时候不需要做） 这一步有时候是不需要的，我们这次的案例就不需要引入ECharts import * as echarts from 'echarts'; template部分 <template> <div id="main"></div> </te
解决vue切换页面echarts不显示
weixin_56541403的博客
05-24 1837
原因：echarts挂载的dom元素有一个属性：_echarts_instance_，它应该类似id，需要每次刷新重新生成，所以我们每次挂载前都去除这个属性。vue3项目中用el-tabs组件切换页面，echarts图表只在初始化的时候显示了一次，切换页面后就不显示了。还有一种方法我查的是用动态ID，那个我没有试，我只用到了上面的方法就解决了。
echarts官网进不去,处理DNS了还是进不去
qq_66107576的博客
05-15 941
最近我的谷歌浏览器进不去echarts官网,按照网上的方法处理了DNS缓存,也还是进不去,这时候只需要把电脑连接的网络从WiFi换成手机热点即可,具体啥原因还不太明白!
解决echarts官网打不开访问失败问题
热门推荐
ll_883963的博客
06-07 1万+
www
在vue项目中简单使用Echarts&第一次使用时的各种报错与解决
like896369216的博客
05-21 3548
关于echarts安装版本报错的解决办法，关于Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getAttribute')错误的解决办法
vue项目中引入echarts
08-20
在Vue项目中引入echarts，你可以按照以下步骤进行操作： 1. 首先，安装echarts和vue-echarts依赖： ``` npm install echarts vue-echarts ``` 2. 在你的Vue组件中，引入echarts和vue-echarts： ```javascript import echarts from 'echarts' import ECharts from 'vue-echarts' // 引入echarts主题（可选） import 'echarts/theme/macarons' export default { components: { chart: ECharts }, data() { return { chartOptions: {} } }, mounted() { this.renderChart() }, methods: { renderChart() { // 构建图表选项 this.chartOptions = { // ... } } } } ``` 3. 在你的模板中使用echarts图表组件： ```html <template> <div> <chart :options="chartOptions"></chart> </div> </template> ``` 4. 在Vue组件的`renderChart`方法中，根据你的需求配置图表选项，并将其赋值给`chartOptions`属性。具体的图表配置可以参考echarts文档。 这样，你就可以在Vue项目中成功引入并使用echarts图表了。记得根据你的需求，配置合适的图表选项以及样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值