脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → 原生echart和vue-echart的使用

原生echart和vue-echart的使用详解

 更新时间：2022年02月10日 15:32:27   作者：短腿姑娘  
这篇文章主要为大家详细介绍了原生echart和vue-echart的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

原生echart

(下方有vue-echart)

1.安装

npm install echarts --save

2.引用

import * as echarts from 'echarts'//局部或全局定义Vue.prototype.$echarts = echarts

3.基础

3.1 series.type

包括：line（折线图）、bar（条形图）、pie（饼图）、scatter（散点图）、graph（图形图）、tree（树状图）等

3.2 series.data

在每个系列中声明：option

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1XSBoZDe-1643440325661)(:/46e8c4fb75ba416aa2bc370fd38edcc3)]

3.3 series.data

echarts包括这些组件：xAxis（笛卡尔坐标系的x轴）、yAxis（笛卡尔坐标系的y轴）、grid（笛卡尔坐标系的底板）、angleAxis（极坐标系的角度轴） , radiusAxis（极坐标系的半径轴），polar（极坐标系的底板），geo（GEO坐标系），dataZoom（改变数据显示范围的组件），visualMap（指定视觉对象的组件）映射），tooltip（工具提示组件）、toolbox（工具箱组件）、series

在这里插入图片描述

3.4 ECharts 常用的样式

如阴影、不透明度、颜色、边框颜色、边框宽度等，由itemStyle串联设置。

itemStyle: {
    // shadow size
    shadowBlur: 200,
    // horizontal offset of shadow
    shadowOffsetX: 0,
    // vertical offset of shadow
    shadowOffsetY: 0,
    // shadow color
    shadowColor: 'rgba(0, 0, 0, 0.5)'
}

4.柱状图

代码示例

	//div区域
	<div id="bar" style="width: 600px;height: 400px;"></div>
	//配置样式
	methods: {
		barEcharts () {
      	  var myChart = this.$echarts.init(document.getElementById('bar'))
      	// 配置图表
		  var option = {
			title: {
			  text: '标题'
			},
			//提示框
			tooltip: {},
			legend: {
			  data: ['']
			},
			//x轴显示种类
			xAxis: {
			  data: ['种类一', '种类二', '种类三', '种类四', '种类五', '种类六']
			},
			//y轴可填数值等
			yAxis: {
			},
			series: [{
			  name: '销量',
			  type: 'bar',
			  //y轴数值
			  data: [5,
				{
				  value: 20,
				  itemStyle: {
					color: '#FFB5C5'
				  }
				}, 36, 10, 10, 20]
				}]
		  }
		  myChart.setOption(option)
   	}
  }
//设置
 mounted () {
    this.barEcharts()
 }

显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BEr5tzGb-1643440325663)(:/758eab770a614630b8823a747b9b2773)]

5.折线图

示例代码

//div
<div id="line" style="width: 600px;height: 400px;"></div>
	//option配置
   lineEcharts () {
      var myChart = this.$echarts.init(document.getElementById('line'))
      // 配置图表
      var option = {
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads']
        },
		//笛卡尔坐标系的底板
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
		//工具框
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
		//线一
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
		  //线二
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }
      myChart.setOption(option)
    }
 //设置
 mounted () {
    this.lineEcharts()
 }

显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bEWrP9tc-1643440325664)(:/662b52c145184cf48a7fbe17b8f652a0)]

6.饼状图

示例代码

//div
<div id="pie" style="width: 600px;height: 400px;"></div>
	//option
    pieEcharts () {
      var myChart = this.$echarts.init(document.getElementById('pie'))
      // 配置图表
      var option = {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }

示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVmKWfdb-1643440325665)(:/e3d85c101d36425c9b23375d739b909f)]

vue-echart

  • 优点：配置简单,方便使用

安装

	//vue 2 
	npm install echarts vue-echarts
	npm i -D @vue/composition-api
	//vue 3
	npm install echarts vue-echarts

引用

//可全局也可在要使用的文件中用
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import ECharts, { THEME_KEY } from 'vue-echarts'
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

使用

<v-chart class="chart" :option="option" />
export default {
  name: '',
  components: {
    'v-chart': ECharts
  },
  provide: {
    [THEME_KEY]: 'dark'
  },
  data () {
    return {
      //option 与原生一致
    }
  }
}

整体例子

<template>
  <v-chart class="chart" :option="option" />
</template>
<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import ECharts, { THEME_KEY } from 'vue-echarts'
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])
export default {
  name: 'HelloWorld',
  components: {
    'v-chart': ECharts
  },
  provide: {
    [THEME_KEY]: 'light'
  },
  data () {
    return {
      option: {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  }
}
</script>
<style scoped>
.chart {
  height: 400px;
}
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BLOPvjI5-1643440325666)(:/ae94a3501f444dbfaed73b5a0564808d)]

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!    

您可能感兴趣的文章:

相关文章

  • Vue.js基础知识汇总

    Vue.js基础知识汇总

    Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。Vue.js和其他库相比是一个小而美的库，作者的主要目的是通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件，感觉作者的思路非常清晰。
    2016-04-04
  • vue 项目引入echarts 添加点击事件操作

    vue 项目引入echarts 添加点击事件操作

    这篇文章主要介绍了vue 项目引入echarts 添加点击事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 解决vue组件销毁之后计时器继续执行的问题

    解决vue组件销毁之后计时器继续执行的问题

    这篇文章主要介绍了解决vue组件销毁之后计时器继续执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue常见的通信方式总结

    vue常见的通信方式总结

    我们日常项目开发中,少不了组件之间的通信,我们可能只知道一些常见的方式比如props,emits,其实,实现组件间的通信有很多种方式,本文就给大家总结一些我们常见的通信方式,需要的朋友可以参考下
    2023-08-08
  • Vue中的Strorage本地化存储详解

    Vue中的Strorage本地化存储详解

    这篇文章主要介绍了Vue中的Strorage本地化存储详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 详解Vue中如何进行分布式日志管理与日志分析

    详解Vue中如何进行分布式日志管理与日志分析

    在现代应用程序中，日志是一项重要的功能，用于帮助开发人员和运维人员了解应用程序的行为并进行故障排除，本文将介绍如何在Vue应用程序中实现分布式日志管理和日志分析功能，感兴趣的可以了解一下
    2023-06-06
  • vue与ant-tree结合伪造懒加载并可以查询

    vue与ant-tree结合伪造懒加载并可以查询

    这篇文章主要为大家介绍了vue与ant-tree结合伪造懒加载并可以查询实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • 解决vuex刷新数据消失问题

    解决vuex刷新数据消失问题

    这篇文章主要介绍了解决vuex刷新数据消失问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 解决vue创建项目使用vue-router和vuex报错Object(...)is not a function

    解决vue创建项目使用vue-router和vuex报错Object(...)is not a&nb

    这篇文章主要介绍了解决vue创建项目使用vue-router和vuex报错Object(...)is not a function问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • Vue数据代理的原理和实现

    Vue数据代理的原理和实现

    数据代理是什么？通过一个对象代理，对另一个对象中属性的操作，简单就是说：可以通过 对象b 对 对象a 中的属性进行操作，这里我学到的数据代理是用Object.defineProperty这个方法进行操作
    2022-11-11

最新评论