织梦网站采集如何做,html网站搭建,wordpress 底部导航,给您更优质的服务体验本文为个人近期学习总结#xff0c;若有错误之处#xff0c;欢迎指出#xff01; Echarts在vue2中的基础使用 一、简单介绍二、基本使用#xff08;vue2中#xff09;1.npm安装2.main.js引入3.使用步骤(1)准备带有宽高的DOM容器#xff1b;(2)初始化echarts实例#xff… 本文为个人近期学习总结若有错误之处欢迎指出 Echarts在vue2中的基础使用 一、简单介绍二、基本使用vue2中1.npm安装2.main.js引入3.使用步骤(1)准备带有宽高的DOM容器(2)初始化echarts实例(3)定义图表的配置项和数据(4)为echarts实例设置配置项和数据。 一、简单介绍 一个基于 JavaScript 的开源可视化图表库支持用户交互和个性化定制提供折线图、柱状图、饼图、散点图、关系图、树图、地图、仪表盘等各种图表类型功能非常强大。 这里提供几个官网相关地址 官网地址https://echarts.apache.org/zh/index.html 官网使用手册https://echarts.apache.org/handbook/zh/get-started/ 官网图表示例地址https://echarts.apache.org/examples/zh/index.html 图表配置项手册地址https://echarts.apache.org/zh/option.html#title 图表API地址https://echarts.apache.org/zh/api.html#echarts 在绘制具体图表时可在配置项里查阅各个属性和其代表含义涉及图形交互时可查看API的使用。 再推荐俩关于echarts的社区网站可参考学习逛一逛你一定会惊叹网友的智慧个人也会受益匪浅哦_。 网站一https://www.makeapie.cn/echarts 网站二https://echarts.zhangmuchen.top/#/index
二、基本使用vue2中
1.npm安装
npm install echarts --save这里个人安装的版本是5.4.3 所以安装命令为npm install echarts5.4.3 --save 注意不同版本的echarts部分属性的书写格式可能存在差异。后续更文中图表的属性写法皆是5.4.3版本。
2.main.js引入
// 引入Echarts
import * as echarts from echarts// 将ECharts实例化函数设为vue的原型函数便于全局访问
Vue.prototype.$echarts echarts组件内使用时用this.$echarts.xxx。
3.使用步骤
主要步骤分为4步
(1)准备带有宽高的DOM容器
div refchartArea :style{width: 300px,height: 100px} /(2)初始化echarts实例
let myChart this.$echarts.init(this.$refs.chartArea)(3)定义图表的配置项和数据
常规配置如下
option{color:[],//系列(如柱子、折线、饼块)的颜色若不写则取默认值tooltip:{},// 悬浮框会在鼠标悬停或者触摸某个数据点时显示legend:{},//图例grid:{},//直角坐标系绘图网格xAxis:[],//x轴yAxis:[],//y轴//系列图表series:[{name: 销量, // 系列名称type: bar, // 系列图表类型data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容}]
}注意 ①这些配置属性中color、xAxis、yAxis、series属性是数组color里的元素是字符串而xAxis、yAxis、series里的元素是对象其它属性是对象 ②若series系列中的对象设置了name属性值则legend.data可以不必写只需写其它相关图例配置。
各个配置属性对应图像中的位置如下
(4)为echarts实例设置配置项和数据。
myChart.setOption(this.option, true)PS绘图时让图表跟随屏幕自适应
window.addEventListener(resize, () {myChart.resize()
})好了echarts在vue2项目中的使用基础就讲完了后面咱就可以逐步开始绘制具体的各类图表啦
