echarts 折线图 设置y轴最小刻度_Vue 项目如何使用Echarts , 手摸手带你入门
前言
最近可视化浪潮越发凶猛
但是有些小伙伴们就慌了,觉得自己不是很懂,或者说对里面的参数不是很清楚,所以也就印象也就很模糊
那么今天严老湿就带大家好好梳理梳理思路,顺便也带大家写几个Demo
首先得认识Echarts
Echarts
商业级数据图表,它是一个纯JavaScript
的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas
类库ZRender
,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
简单起步
创建vue-cli
我们还是老套路,先创建一个vue-cli
,如果你已经创建了项目可以跳转到 下一步
vue create projectcd projectyarn serve
配置啥的 就不用老严多说了吧(你已经是一个成熟的前端开发者了~)
安装 Echarts
以下几种安装方式择其一
本项目安装的是采用的yarn
, echarts
版本号是 4.8.0
// yarnyarn add echarts// npmnpm install echarts -S// cnpmcnpm install echarts -S
全局引入
在main.js中
import echarts
到了这一步说明你已经把准备工作做完了
清空多余代码
我们先把页面其他不需要用到的代码给清除吧
创建一个容器
创建一个 id 为EChart
的div 作为容器 (使用id会有个小问题,在最后解答)
<div id="EChart" style="width: 300px; height: 300px;">div>
创建一个方法
getRenderer() {console.log(this.$echarts);// 基于准备好的dom,初始化echarts实例let EChart = this.$echarts.init(document.getElementById("EChart"));// 配置参数let config = {title: { text: "悲伤日记" },tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], },yAxis: {},series: [ {name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20], }, ], };// 设置参数 EChart.setOption(config);},
生命周期中调用此方法
mounted() {// 在生命周期中调用 getRenderer 方法this.getRenderer();},
请看大屏幕
吃瓜群众:“这特么不是官方示例么?能不能炫一点”
严老师:“说实话确实有点low ,不要慌这才哪到哪呢,我们先从基础讲堂开始嘛”
先了解其参数
先讲讲其中简单的一些配置参数,枯燥乏味,但是摸清楚之后,以后画图那是顺手得一**
先整点简单、常用的来看看(备注里面皆是对应API
地址)
参数名 | 作用 | 备注 |
---|---|---|
title
|
作为图表名称 | https://echarts.apache.org/zh/option.html#title |
legend
|
作为图表的标记 | https://echarts.apache.org/zh/option.html#legend |
xAxis
|
作为图表的X轴 | https://echarts.apache.org/zh/option.html#xAxis |
yAxis
|
作为图表的Y轴 | https://echarts.apache.org/zh/option.html#yAxis |
series
|
作为图表的系列 | https://echarts.apache.org/zh/option.html#series |
color
|
作为图表的颜色列表 | https://echarts.apache.org/zh/option.html#color |
掰扯了这么多,估计大家心里也没个底,实战一下吧
来造作一下下
series type
来吧!!展示
series指系列列表。每个系列通过 type 决定自己的图表类型
折线图
修改折线图,复制上面的config
代码
只用修改一处地方,那就是series
中的type
属性为line
即可
let config = {
饼状图
饼状图,我们也来看看,将type
修改为pie
当然我们需要把多余的X轴Y轴
配置删除咯,data数据格式也需要修改一下
let config = {
仪表盘
仪表盘将 type
修改为 gauge
let config = {
嗯~ 看起来有那么一点味道了
let config = {
legend
刚刚其实我们已经用到了这个参数噢 ps:饼状图
legend
可以作为图表的标记或颜色的名称描述(专业名词:图例)
它的type有两个参数plain || scroll
默认为plain
当图表内容比较丰富的时候可以使用 scroll
可以带有滚动操作
color
都说颜色是Web的灵魂所在,每一个人都是画手
color调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。
官方默认配色 :
'#c23531',
我们也可以自己修改颜色,规则是按数据对应的index
找color
颜色
例如这样:
let config = {
yAxis
yAxis 指直角坐标系 grid 中的 y 轴,一般情况下单个 grid 组件最多只能放左右两个 y 轴,多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
我们还是以线条为参考8
先看看基础篇,我们在y轴声明了一个name
let config = {
但是有时候呢,我们会根据需求,要做一个双Y轴,顾名思义双Y轴,在加一个Y轴就好了
let config = {
xAxis
xAxis指直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
x轴与y轴基本同理,直接改成数组就成为双x轴了
let config = {
其他参数
title 标题组件,包含主标题和副标题。
backgroundColor背景色,默认无背景。
animation是否开启动画。
grid 直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)。
tooltip提示框组件。
到了上面基础篇也就差不多了
使用id为问题所在
其实我们讲了这么多,我们梳理梳理最开始的问题
- id重名怎么办?
- 数据多个渲染怎么办?
答案:使用ref,因为vue是单页面,使用id出现 重名会导致渲染问题
具体怎么使用我们来看看
<div ref="EChart" style="width: 300px; height: 300px;">div>
// 同样的初始化参数 但是我们此次使用的是ref
总结
使用echarts
的熟练度最主要的就是写得多,社区的案例也是多不胜数,面向社区开发就好了
社区地址:https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all
参考文献
https://echarts.apache.org/zh/option.html
https://echarts.apache.org/examples/zh/index.html
echarts 折线图 设置y轴最小刻度_Vue 项目如何使用Echarts , 手摸手带你入门相关推荐
- echarts 折线图 设置y轴最小刻度_用plotly和plt画图的基本设置(标题、坐标轴、图例、注释、图像)...
参考链接:用plotly和plt画图的基本设置(标题.坐标轴.图例.注释.图像) - weixin_41670527的博客 - CSDN博客 非常好的文章,值得推荐. 一 用matplotlib.py ...
- echarts 折线图 设置y轴最小刻度_手把手教你玩转echarts(二)折线图
茫茫人海中与你相遇 相信未来的你不会很差 作者:婷酱Yaaa 来源:https://juejin.im/post/5f0292d35188252e5a5dbed0 前言 哈喽,everybody,我又 ...
- echarts 折线图 设置y轴最小刻度_数据可视化—Echarts图表应用
<错误>郑愁予 我打江南走过, 那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞.你的心如小小寂寞的城,恰若青石的街道向晚.蛩音不响,三月的春帷不揭,你的心是小小的窗扉紧掩.我达达 ...
- echarts 折线图 设置y轴最小刻度_【硬货】vue全家桶+Echarts+百度地图,搭建数据可视化系统...
作者丨夙言 来源丨前端大牛爱好者(Web-2017) https://segmentfault.com/a/1190000018993981 本文章篇幅略长,内容有点多,大佬可根据目录选择性查阅,新人 ...
- echart 折线图设置y轴单位_如何让echarts中y轴的单位位于数值的右上角
请问:如何让echarts中y轴的单位位于数值的右上角 1.创建折线图的数据区(包括年份和数据). 2.仅选择数据区创建折线图(插入选项卡/图表工具组/折线图). 3.得到的折线图x坐标不满足要求,在 ...
- vue echarts 折线图多Y轴显示,加动态配置Y轴颜色
1.效果图 2.引入依赖 npm install echarts --save 3.在mian.js中引入 import * as echarts from 'echarts'; Vue.protot ...
- echarts 折线图多Y轴,每一条Y轴独属于一个区域,折线之间不交集。
1.前景:在echarts中设置多个Y轴的时候,如果不想Y轴的折线有交叉,则需要考虑一下这个方案: 每一条Y轴分为一个区域,使得每一个Y轴都是一个独立的区域,举个例子:四条Y轴,那就是每条Y轴占四分一 ...
- echart 折线图设置y轴单位_Echarts自定义Y轴
1-Y轴默认.png 修改后: 2-1-字符串模板自定义Y轴刻度.png 代码: let option = { title: { text: 'ECharts 入门示例' }, tooltip: {} ...
- echarts折线图改变y轴刻度
目前项目有个要求,比如y轴数据大部分在几百,但是有个峰值达到了1W..这样导致经常出现的几百的数据变化不明显,这时候就需要对y轴数据进行处理,将不经常出现的数据范围进行缩小,比如1-500和500-5 ...
最新文章
- Linux学习 Unit 12
- Servlet3.0 multipart 文件上传技术
- 在辉腾锡勒我见到了狼
- 在vue项目中操作元素ref案例;
- 取消一个请求(Cancel)
- LMM(LightMoonMovie)亮月湾电影分享管理系统;
- 用html制作QQ彩贝
- win10 计算机组策略,win10家庭版系统找不到组策略gpedit.msc的解决方法
- 差分密码分析读书报告
- 【矩阵论笔记】过渡矩阵
- apache网站ftp服务器搭建,利用 Apache FtpServer 搭建 FTP 服务器
- img标签图像cors跨域获取资源
- sklearn学习-SVM例程总结2(特征选择——单因素方差分析(方差分析anova ))
- 其实macbook装win7很简单
- 在虚幻引擎中使用Python批处理3:批量修改属性
- 8421码、5421码、2421码与余三码
- Power Query M函数_我常用的玩法
- 像差分析(更新。。。)
- 台式机利用独立显卡连接两个显示器
- 简述计算机在市场调研与预测中的应用,《市场调研与预测》自考试卷-20210323213815.doc-原创力文档...