echarts 大数据可视化

echarts是一个开源的js图表库就是为了完成大数据可视化,也是现在企业中比较主流得图表库

特点:

兼容绝大多数浏览器

高度定制化我们数据可视化图表

1. title 配置

<template><div id="div"><div id="main"></div></div>
</template><script>
import * as echarts from "echarts";
export default {mounted() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById("main"));// 绘制图表//setOption 是一个方法 就是用来设置当前echarts的各种配置的一个方法myChart.setOption({title: {//设置标题的text: "我是主标题", //类似于一个主标题//show:false        //是否显示标题link: "http://www.baidu.com", //设置点击标题之后的超链接地址target: "self", //设置当跳转之后是否打开新页面subtext: "我是副标题", //设置副标题sublink: "http://www.qq.com",backgroundColor: "gra y",},tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20],},],});},
};
</script><style scoped>
#div {width: 100%;height: 100%;
}#main {width: 500px;height: 500px;
}
</style>

2. tooltip 设置提示框组件的一个属性

<template><div id="div"><div id="main"></div></div>
</template><script>
import * as echarts from "echarts";
export default {mounted() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById("main"));// 绘制图表//setOption 是一个方法 就是用来设置当前echarts的各种配置的一个方法myChart.setOption({title: {//设置标题的text: "我是主标题", //类似于一个主标题//show:false        //是否显示标题link: "http://www.baidu.com", //设置点击标题之后的超链接地址target: "self", //设置当跳转之后是否打开新页面subtext: "我是副标题", //设置副标题sublink: "http://www.qq.com",backgroundColor: "gra y",},//提示框设置tooltip: {show: true, //显示或隐藏    默认显示trigger: "axis", //触发类型 默认必须在图形中才能触发  设置axis之后可以按照坐标轴触发axisPointer: {//触发类型之后的显示选项type: "shadow", //cross显示一个十字准心的样式   shadow 图形被阴影包裹},triggerOn: "click", //默认mousemove     click 点击之后触发backgroundColor: "yellow",},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20],},],});},
};
</script><style scoped>
#div {width: 100%;height: 100%;
}#main {width: 500px;height: 500px;
}
</style>

3. series 系列在series 中系列的意思是指一组数值生成他们所映射的图

series: [{name: "销量",type: "line", //bar 默认柱状图   line 折线图data: [5, 20, 36, 10, 10, 20],},],

4.legend 图例对当前的系列进行标记，它可以通过点击控制显示的内容

 legend: {icon: "circle", // circle  将图例设置成圆形},

5. 设置单个柱状图的颜色 itemStyle 在数据中对单个柱子进行颜色设置

 series: [{name: "销量",type: "bar", //bar 默认柱状图   line 折线图data: [5,{value: 20,itemStyle: {color: "#a90000",},},36,10,10,20,],},],

echarts 大数据可视化相关推荐

Hadoop+hive+flask+echarts大数据可视化项目之hive环境搭建与系统数据的分析思路
Hadoop+hive+flask+echarts大数据可视化项目(四) --------------hive环境搭建与系统数据的分析思路---------------- 关注过Hadoop+hive ...
Hadoop+hive+flask+echarts大数据可视化之系统数据收集
Hadoop+hive+flask+echarts大数据可视化项目(一) --------------系统数据收集---------------- 谈到大数据的项目,一般以数据可视化为主体,收集大数据 ...
Hadoop+hive+flask+echarts大数据可视化项目之系统数据整合和hadoop环境搭建
Hadoop+hive+flask+echarts大数据可视化项目(二) --------------系统数据整合和hadoop环境搭建---------------- 关注Hadoop+Hive+F ...
Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
Echarts大数据可视化物流航向省份流向迁徙动态图，开发全解+完美参数注释
最近在研究Echarts的相关案例,毕竟现在大数据比较流行,比较了D3.js.superset等相关的图表插件,还是觉得echarts更简单上手些. 本文是以原生JS为基础,如果使用Vue.js的话, ...
echarts 大屏可视化_看似复杂炫酷的数据可视化设计，用这波神器轻松搞定！
数据大屏与数据可视化数据可视化是目前对数据展示最常用的方式.数据的可视化设计有助于将复杂的数据,用最易理解的方式展示在用户的面前. 数据可视化在中后台的设计中很常见,通常主要用于分析和决策,对实时性 ...
基于Hadoop+Java的地区旅游大数据可视化管理（IDEA+Zookeeper+Hive+HBase+Echarts）
目录地区旅游大数据可视化管理 1 最终数据可视化样式 1 绪论 3 研究背景 3 研究现状 4 开发环境 4 数据抓取和清洗 5 相关技术 5 Jsoup 5 数据抓取 5 利用Jsoup抓取旅游网 ...
基于hadoop和echarts的教育大数据可视化系统毕设完整的代码+数据集
一.摘要在线教育平台现在是教育体系的重要组成部分,在当前大数据时代的背景下,促进教育机构建立统一平台.统一资源管理的数字化教学系统.如何评估系统平台的健康程度.学生的学习体验和在线课程的质量对于课 ...
Django博客来访人员地域分布大数据可视化---echarts绘图、geoip2获取地理位置
文章目录 Django博客来访人员地域分布大数据可视化---echarts绘图.geoip2获取地理位置效果 echarts作图 geoip2获取地理位置 api接口开发 ajax前后端动态交互 D ...
（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
回顾作者用心写作,请动动你可爱的小手点亮大拇指.你的鼓励是作者继续创作的动力- 前端的学习,不能仅仅依靠知识点的学习,实战项目的操作可以帮助我们整理知识点以及提高编程能力,更有助于学习和实践,最重要 ...

echarts 大数据可视化

echarts 大数据可视化相关推荐

最新文章

热门文章