我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

原生echart

(下方有vue-echart)

  • 官网文档 https://echarts.apache.org/zh/index.html
  • 优点:方便修改

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)]

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!    

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

详解Android原生json和fastjson的简单使用

android原生操作json数据 主要是两个类 JSONObject 操作对象 JONSArray操作json数组 对象转json//创建学生对象 Student student=new Student();student.
2022-06-06

k8sservice使用详解(云原生kubernetes)

这篇文章主要介绍了k8sservice使用详解(云原生kubernetes),一个Service可以看作一组提供相同服务的Pod的对外访问接口,作用于哪些Pod是通过标签选择器来定义的,Service是一个概念,主要作用的是节点上的kube-proxy服务进程,本文结合示例代码详解,需要的朋友参考下
2023-02-14

Linux下使用autoconf和automake生成Makefile原理详解

作为Linux下的程序开发人员,一定都遇到过Makefile,用make命令来编译自己写的程序确实是很方便。一般情况下,大家都是手工写一个简单Makefile,如果要想写出一个符合自由软件惯例的Makefile就不那么容易了. 在本文中,将
2022-06-03

k8s Ingress使用详解(云原生kubernetes)

k8s提供了Ingress这种资源对象,Ingress只需要一个NodePort或者一个LB就可以满足暴露多个Service的需求,接下来通过本文讲解下k8s Ingress使用详解(云原生kubernetes),需要的朋友可以参考下
2023-02-23

Flutter使用Android原生播放器详解

这篇文章主要介绍了Flutter使用Android原生播放器,自己写Flutter也有一段时间了,刚好最近公司的项目想在PC端重写一个,就想着用Flutter实现试一试
2023-02-28

k8s中pod使用详解(云原生kubernetes)

这篇文章主要介绍了k8s中pod使用详解(云原生kubernetes),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-01-17

使用原生JS添加进场和退场动画详解

总所周知啊,身为一个合格的前端搬砖工,会编写并且添加一些基础的动画效果可谓是比较基础且轻车熟路的技能了。本文将教大家如何使用原生JS添加进场和退场动画,感兴趣的可以了解一下
2022-11-13

Vue使用electron生成桌面应用过程详解

这篇文章主要介绍了Vue使用electron生成桌面应用过程,很想使用electron制作一个桌面应用,但是真的上手使用的时候才发现electron的坑实在是太多了,先将遇到的坑记录在这里,遇到一个记录一个
2023-05-16

Vue privide 和inject 依赖注入的使用详解

这篇文章主要介绍了Vue privide 和inject 依赖注入的用法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-11-13

编程热搜

目录