在vue中echarts简单使用

已于 2024-03-14 14:46:31 修改
阅读量1.1k 收藏
点赞数
文章标签： echarts vue.js javascript
于 2022-03-09 14:41:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35880671/article/details/123377057
版权

安装

npm i echarts -S

使用

 import echarts from "echarts";
 
 this.xharts = echarts.init(document.getElementById('main'))
 this.xharts.setOption(option)

饼图配置

initCharts(option) {
      if (this.isEmpty(option)) {
        option = {}
        option.data = [
          {value: 335, name: 'A'},
          {value: 310, name: 'B'},
          {value: 274, name: 'C'}
        ].sort(function (a, b) {
          return a.value - b.value;
        })
      }

      let myCakeCharts = echarts.init(document.getElementById(this.id));

      var tempOption = {
        title: {
          show: false,
          text: 'Customized Pie',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return params.name + ':' + params.percent + "%"
          }
        },
        grid: {
          top: '180px',
          left: '50px',
          right: '15px',
          bottom: '0px'
        },
        color: [
          '#5470c6',
          '#91cc75',
          '#fac858',
          '#ee6666',
          '#73c0de',
          '#3ba272',
          '#fc8452',
          '#9a60b4',
          '#ea7ccc',
        ]
        , series: [
          {
            name: option.name ? option.name : '占比',
            type: 'pie',
            radius: '90%',
            minAngle: 15,//最小角度
            startAngle: option.startAngle?option.startAngle: 110, //起始角度
            avoidLabelOverlap: true,
            center: ['50%', '50%'],
            data: option.data.sort(function (a, b) {
              return a.value - b.value
            }),
            label: {
              formatter: function (e) {
                return e.name + e.percent + "%"
              },
              function(colors) {
                var colorList = [
                  '#5470c6',
                  '#91cc75',
                  '#fac858',
                  '#ee6666',
                  '#73c0de',
                  '#3ba272',
                  '#fc8452',
                  '#9a60b4',
                  '#ea7ccc',
                ];
                return colorList[colors.dataIndex];
              },
            },
            labelLine: {
              lineStyle: {
                color: 'black'
              },
              smooth: 0.2,
              length: 10,
              length2: 10,
            },
            itemStyle: {
              color: function (colors) {
                var colorList = [
                  '#5470c6',
                  '#91cc75',
                  '#fac858',
                  '#ee6666',
                  '#73c0de',
                  '#3ba272',
                  '#fc8452',
                  '#9a60b4',
                  '#ea7ccc',
                ];
                return colorList[colors.dataIndex];
              },
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      }
      if (this.isRadius) {
      	//玫瑰饼 不设默认饼
        tempOption.series[0].roseType = 'radius'
      }
      if (option.legend) {
      //顶部的块
        tempOption.legend = option.legend
      }
      myCakeCharts.setOption(tempOption)
    }

圆环

initCharts(option) {
      if (this.isEmpty(option)) {
        option = {}
        option.data = [
          {
            name:'区域1',
            value:120
          },
          {
            name:'区域2',
            value:200
          },
          {
            name:'区域3',
            value:150
          },
        ]
      }

      let myCakeCharts = echarts.init(document.getElementById(this.id));

      var tempOption = {
        tooltip: {
          trigger: 'item',
          formatter:function (params) {
            return params.name + ':'+params.percent +"%"
          }
        },
        legend: {
          show:this.showLegend,
          top: 'middle',
          orient: 'vertical',
          left: 'right'
        },
        color:option.colors!==undefined?option.colors: [
          '#5470c6',
          '#91cc75',
          '#fac858',
          '#ee6666',
          '#73c0de',
          '#3ba272',
          '#fc8452',
          '#9a60b4',
          '#ea7ccc',
        ],
        grid: {
          left: 0,
          // right: 0,
          bottom: 0,
          top: 0,
          containLabel: true
        },
        series: [
          {
          	//鼠标移入事件
            silent:this.showSilent,
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: true,
            label: {
              normal: {
                show: this.showLineLabel,
                formatter:function (params) {
                  return params.name +params.percent +"%"
                },
                textStyle: {
                  fontSize: 13,
                },
                position: 'outside'
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              normal: {
                show: this.showLineLabel,
                length: 10,
                length2: 10,
              },
              emphasis: {
                show: true
              }
            },
            data: option.data
          }
        ]
      }
      if (option.radius!==undefined){
      	//设置环的宽度
        tempOption.series[0].radius = option.radius
      }
      if (option.chartsCenter!==undefined){
      //设置位置
        tempOption.series[0].center = option.chartsCenter
      }
      if (option.title!==undefined){
        tempOption.title = option.title
      }
      // console.log(tempOption)
      myCakeCharts.setOption(tempOption)
    }

横向柱状图

initCharts(options) {
      if (this.isEmpty(options)) {
        options = {}
        options.labels = ['A', 'B', 'C', 'D', 'E']
        options.values = [150, 230, 224, 218, 135]
      }

      var color =  [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452',
        '#9a60b4',
        '#ea7ccc',
      ]
      let myCakeCharts = echarts.init(document.getElementById(this.id));

      var tempOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          show: false,
        },
        color:color,
        barWidth:"50%",
        yAxis: {
          type: 'category',
          inverse: options.inverse?options.inverse:false,//倒序
          data: options.labels,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: options.name?options.name:'默认',
            type: 'bar',
            barWidth:'30%',
            data: options.values,
            center:["50%","50%"],
            label:{
              show:false,
              position:'insideRight',
              offset:[30,0]
            },
            itemStyle: {
              // shadowBlur: 200,
              // shadowColor: 'rgba(0, 0, 0, 0.5)',
              barBorderRadius: [20],
              color: function (colors) {
                var colorList = [
                  '#5470c6',
                  '#91cc75',
                  '#fac858',
                  '#ee6666',
                  '#73c0de',
                  '#3ba272',
                  '#fc8452',
                ];
                return colorList[colors.dataIndex];
              },
            },
          },
        ]
      }
      myCakeCharts.setOption(tempOption)
    }

折线图

initCharts(optionData) {
      if (this.isEmpty(optionData)) {
        optionData = {}
        optionData.labels = ['xxx公司', 'xxxx公司', 'xxxxx公司', 'xxxxxx公司']
        optionData.values = [150, 230, 224, 218]
      }

      var colors = [
        '#5470c6',
        '#9a60b4',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#ea7ccc',
        '#fc8452',
      ]
      this.myCakeCharts = echarts.init(document.getElementById(this.id));
      var tempOption = {
        tooltip: {
          trigger: 'axis',
          // formatter:function (f,i) {
          //   console.log(f,i)
          // }
        },
        xAxis: {
          name: optionData.unitX ? optionData.unitX : 'nn',
          type: 'category',
          data: optionData.labels,
          boundaryGap: false,
          axisLabel: {
            interval: 0,  //设置这里
            rotate: optionData.rotate ? optionData.rotate : 0
          }
        },
        yAxis: {
          name: optionData.unitY ? optionData.unitY : 'mm',
          type: 'value'
        },
        color: colors,
        grid: {
          // top: '50px',
          // left: '50px',
          right: '40px',
          // bottom: '20px',
        },
        series: [
          {
            name: optionData.seriesName ? optionData.seriesName : '-',
            data: optionData.values,
            type: 'line',
            //是否平滑曲线
            smooth: this.isSmooth
          }
        ]
      }


      if (this.isFullColor) {
        // tempOption.xAxis.boundaryGap = false
        tempOption.series[0].areaStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                {offset: 0, color: 'rgba(104,104,230,1)'},//区域渐变色
                {offset: 1, color: 'rgba(104,104,230,0.00)'},
              ]
            ) //改变区域颜色
          }
        }
      }
      if (this.showLegend) {
        if (optionData.legend){
          tempOption.legend = optionData.legend
        }else {
          tempOption.legend = {}
        }
      }
      if (this.showMaxMin){
        tempOption.series[0]. markPoint =  {
          data: [
            {type: 'max', name: '最大值'},
            // {type: 'min', name: '最小值'}
          ]
        }
      }

      if (!this.isEmpty(optionData.series)) {
        tempOption.series = optionData.series
      }
      this.myCakeCharts.setOption(tempOption)
    }

一些配置项

silent:true, 禁止所有鼠标悬停 划入事件  false为开启 true为关闭
selectedMode:false  禁止 legend的点击事件
yAxis ===> scale:1.5 配置y轴刻度最大值倍数
yAxis：{
	nameTextStyle:{//y轴上方单位的颜色
	  color:'#fff'  
	},
}

动态鼠标悬浮效果

var currentIndex = -1;
setInterval(() => {
  var dataLen = tempOption.xAxis.data.length;
  this.myCakeCharts.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
  currentIndex = (currentIndex + 1) % dataLen;
  this.myCakeCharts.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: currentIndex,
  });
  this.myCakeCharts.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
  // console.log(currentIndex)
}, 3000)
白图裘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【vue】 在vue2项目中使用echarts
amoureux555的博客
02-28 2798
在vue2项目中使用echarts
html中使用vue和echarts
最新发布
02-20
在Vue中使用ECharts，首先需要通过npm或yarn安装： ``` npm install echarts --save # 或者 yarn add echarts ``` 然后在Vue组件中导入ECharts，并在`mounted`生命周期钩子中初始化图表实例，设置配置项。配置项是...
vue2中echarts的使用
weixin_46544034的博客
04-09 1639
echarts
ECharts入门
qq_45835940的博客
01-03 3197
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="...
vue中使用echarts制作圆环图的实例代码
10-18
本文主要介绍如何在Vue项目中使用ECharts库来制作圆环图，提供了一个实例代码供参考。ECharts是一个使用JavaScript实现的开源可视化库，提供直观、生动、可交互、高度可定制的数据可视化图表，非常适合用于Vue等前端...
在vue中使用echarts图表实例代码详解
10-17
在 Vue 中集成 ECharts 图表库是...总结来说，Vue 中使用 ECharts 包括安装、全局或按需引入、初始化图表、设置配置项、更新图表以及销毁图表等步骤。通过这些方法，你可以灵活地在 Vue 应用中实现各种数据可视化需求。
vue-echarts可视化模板
06-04
在 Vue 中使用 Echarts，首先需要安装相关的依赖。你可以通过 npm 或 yarn 来进行安装： ```bash npm install echarts vue-echarts --save # 或者 yarn add echarts vue-echarts ``` 安装完成后，你需要在 Vue ...
详解Vue中使用Echarts的两种方式
08-27
该方式的优点是简单易用，直接引入Echarts库，然后在Vue组件中使用。首先，我们需要使用npm安装Echarts： `npm install echarts --save` 然后，在我们的main.js文件中引入Echarts： `import echarts from '...
Vue2 使用 Echarts 创建图表实例代码
08-30
本篇文章主要介绍了Vue2 使用 Echarts 创建图表实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue2中使用echarts
Lydia
07-18 3527
vue中使用echarts
vue2中echarts使用
qq_60976312的博客
01-10 2203
vue2中echarts使用
在Vue2中快速使用ECharts
爱敲键盘的程序源的博客
12-28 2682
在Vue2中快速使用ECharts(持续更新)
echarts在vue2中的简单使用
weixin_47030180的博客
11-20 5500
因项目需要，需要大量的展示数据，但是大量的使用表格对于界面观感不好，所以采用了echarts来对数据进行展示，下面我来详细介绍echarts在vue中的使用方法： 在vue中安装echarts 以vscode编辑器和vue-cli为例 用vue创建项目这里一笔带过 打开终端使用命令行输入 npm i echarts--save 在package.json中可以查看到 3.为了使用的方便我们选择将在vue的原型上加入echarts 打开 main.js import echarts from '
echarts在vue中简单应用
weixin_43965881的博客
05-16 144
在vue项目中使用echarts生成柱状图
如何在vue2里面使用echarts
weixin_52332409的博客
05-29 3000
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']第五步写echatr使用的时候直接使用this.$echarts.xxx就可以了。-- 为 ECharts 准备一个定义了宽高的 DOM -->ok,如果你想使用其他的示例图表可以去官网替换掉 option里面的东西。// 基于准备好的dom，初始化echarts实例。// 使用刚指定的配置项和数据显示图表。3. 使用 -main.js（在这里使用第二种）第三步在main.js（在这里使用第二种）
在vue中echarts怎么使用
08-10
在Vue中使用Echarts非常简单。下面是一些基本的步骤： 1. 首先，你需要在项目中安装Echarts。可以使用npm或者yarn来安装。 ```bash npm install echarts ``` 2. 在你的Vue组件中引入Echarts。 ```javascript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值