vue中的数据可视化(echarts)和highcharts

官网链接：echarts官网链接

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器
也即是说做图表之前，一定给一个单独的容器来存放图表

绘制图表不能在created里面绘制，要在mounted里面绘制，因为做DOM相关的操作要在挂载完成之后才能操作，

先在mounted里面实例化一个

先let一个options里面写配置项，这些配置项和后面写的 myecharts.setOption(options)相对应

// y轴不定义时，代表它能自定义生成。从0开始到最大值。即使想让y轴自动生成，下面也要写个yAxis:{}，写个yAxis:{}代表有y轴，但是我自己不配置，
yAxis:{},
如果想要设置y轴的刻度的话，可x轴刻度的设置方式一样，写在y轴的data里面，只不过y轴的是数字就不用加引号

series中有几个对象就代表图中有几个展示出来的，例如下面这个就代表图中展示出来的两个折线

series:[{name:"订单量",data:[200,100,320,200,700,100,200],type:'line',
}
,{name:"库存量",data:[100,300,70,400,500,200,100],type:'line',
}

如上图所示的，x轴的周一应该从（0，0）的位置开始，所以也就意味着x轴需要调整，所以找到配置项中的boundaryGap。如下图所示，

所以要在x轴的配置项里面把boundaryGap设置为false,如下下图所示

下图中的展示近一周的销售量是怎么做到的呢，

在配置项中找lengend貌似有点费劲，直接在实例中找到有lengend的图，看看它们是怎么操作的，

但是有时候ppt只需要一个图片，所以做出来的折线图也要有导出图片功能，如下图所示，但是要注意，我们写的数据是死的，可能以后需要的是从后台获取数据展示出来

效果为：

要注意上面写的这些都属于配置项，都要写在let options里面

highcharts链接，这是国外的文档
echarts是百度的，
highcharts比echarts强大的地方在echarts虽然免费开源。但是highcharts的兼容性比echarts好 echarts是ie8+ highcharts是ie6+

echarts和highcharts的比较
echarts底层为canvas，highcharts底层为svg

canvas特点：①依赖分辨率②不支持事件处理器③弱的文本渲染能力④能够以.jpg、.png格式保存结果图像⑤最适合图像密集型的游戏，其中的许多对象会被频繁重绘svg特点：①不依赖分辨率②支持事件处理器③最适合带有大型渲染区域的应用程序（如谷歌地图）④复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快）⑤不适合游戏应用

使用highcharts第一步
先引入

直接复制过来了一分钟上手highcharts的例子，放到index.vue中的mounted里面

文档教程–api文档里面有相应的配置项

vue中的数据可视化(echarts)和highcharts相关推荐

Vue中使用数据可视化Echarts图表展示
目录 Echarts--商业级数据图表 Echarts支持的图表 Echarts的使用方法 Echarts--商业级数据图表商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览 ...
vue中使用数据可视化
1.多坐标系就是一个图表实现展现多个坐标系,一个坐标系就是一个grid 这里主要用到关键几个属性:grid,xAxis,yAxis,gridIndex,xAxisIndex,yAxisIndex g ...
数据可视化——echarts
目录一.可视化面板介绍二.可视化库介绍三.Echarts-体验 1.引入echarts 插件文件到html页面中 2.准备一个具备大小的DOM容器 3.初始化echarts实例对象 4.指定配置 ...
数据可视化Echarts学习指南
可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. 01-使用技术完成该项目 ...
数据可视化ECharts:ECharts使用
Echarts-介绍常见的数据可视化库: - D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) - ECharts.js 百度出品的一个开源 Javasc ...
Echarts数据可视化echarts实例的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录数据可视化-echarts入门.常见图表案例及项目案例一.简介一.数据可视化简介二.echarts简介三.echarts特点四.ZRender介绍二.Echarts的基本使用一 ...
Django博客来访人员地域分布大数据可视化---echarts绘图、geoip2获取地理位置
文章目录 Django博客来访人员地域分布大数据可视化---echarts绘图.geoip2获取地理位置效果 echarts作图 geoip2获取地理位置 api接口开发 ajax前后端动态交互 D ...
数据可视化ECharts的七大常用图表，看完就会用(1)
本文的后半部分:数据可视化ECharts的常用图表,看完就会用(2) 文章目录数据可视化什么是数据可视化? 数据可视化的好处数据可视化的实现方式 ECharts ECharts的特性一个ECh ...
【AI白身境】深度学习中的数据可视化
文章首发于微信公众号<有三AI> [AI白身境]深度学习中的数据可视化今天是新专栏<AI白身境>的第八篇,所谓白身,就是什么都不会,还没有进入角色. 上一节我们已经讲述了如何 ...

vue中的数据可视化(echarts)和highcharts

vue中的数据可视化(echarts)和highcharts相关推荐

最新文章

热门文章