前端可视化组件库-Apache ECharts简单介绍vue框架使用eCharts例子

eCharts是一个基于 JavaScript 的开源可视化图表库。
实现集成了前端可视化的多种手段。
官网链接：ECharts官网

初学者建议去官网看看起步的内容，另外博主也是今天刚学的噢，写得不好多多体谅。

下面介绍在vue项目终集成eCharts组件库：

创建好你的vue项目。
该步骤，默认你已经初始化好你的vue项目了！（还没学框架的去官网看看html格式的）
安装依赖。
npm命令行输入（你的环境已经安装好nodejs）：
npm install echarts --save
测试例子。
例子都是从官网上复制而来，本人只是做了框架的封装。
官网例子大全：eCharts各种可视化例子大全

注意1：你定义的存放eCharts元素的div，一定得指定宽高！！不然没有效果！！！
注意2：你的eCharts元素的创建必须得让div父元素先创建完！！在vue生命周期上就是得在created钩子函数之后！！！我用的是mounted钩子函数。
我在代码实现定义宽高的style:

<style scoped>
#main{width: 100%;height:600px;
}
</style>

好咯，下面请看我的例子：
折线图例子：
截图：vue代码：

<template><div class="about"><div id="main"></div></div>
</template><script>
import * as echarts from 'echarts';export default {data(){return{}},methods:{},mounted(){console.log('create-----');// 基于准备好的dom，初始化echarts实例var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = {title:{text:'折线图',textAlign:'auto'},//标题组件xAxis: {type: 'category',data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']},yAxis: {type: 'value',min:0,//最小值interval:20 //设置强制刻度值},// 是否显示提示框组件tooltip:{show:true},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]};option && myChart.setOption(option);}
}
</script><style scoped>
#main{width: 100%;height:600px;
}
</style>

柱形图例子：
截图：

代码：

<template><div id="main"></div>
</template><script>
import * as echarts from 'echarts';export default {data(){return{}},methods:{},mounted(){console.log('create-----');// 基于准备好的dom，初始化echarts实例var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = {title:{text:'柱形图',textAlign:'auto'},//标题组件xAxis: {type: 'category',data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']},yAxis: {type: 'value',min:0,//最小值interval:20 //设置强制刻度值},// 是否显示提示框组件tooltip:{show:true},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'bar'}]};option && myChart.setOption(option);}
}
</script><style scoped>
#main{width: 100%;height:600px;
}
</style>

散点图例子
截图：
代码：

<template><div id="main"></div>
</template><script>
import * as echarts from 'echarts';export default {data(){return{}},methods:{},mounted(){console.log('create-----');// 基于准备好的dom，初始化echarts实例var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = {title:{text:'散点图'},xAxis: {},yAxis: {},series: [{symbolSize: 20,data: [[10.0, 8.04],[8.07, 6.95],[13.0, 7.58],[9.05, 8.81],[11.0, 8.33],[14.0, 7.66],[13.4, 6.81],[10.0, 6.33],[14.0, 8.96],[12.5, 6.82],[9.15, 7.2],[11.5, 7.2],[3.03, 4.23],[12.2, 7.83],[2.02, 4.47],[1.05, 3.33],[4.05, 4.96],[6.03, 7.24],[12.0, 6.26],[12.0, 8.84],[7.08, 5.82],[5.02, 5.68]],type: 'scatter'}]};option && myChart.setOption(option);}
}
</script><style scoped>
#main{width: 100%;height:600px;
}
</style>

平行坐标图例子
截图：

代码：

<template><div id="main"></div>
</template><script>
import * as echarts from 'echarts';//官网例子
// https://echarts.apache.org/examples/zh/index.html#chart-type-line
export default {data(){return{}},methods:{},mounted(){console.log('create-----');// 基于准备好的dom，初始化echarts实例var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = {title:{text:'平行坐标图'},parallelAxis: [{ dim: 0, name: 'Price' },{ dim: 1, name: 'Net Weight' },{ dim: 2, name: 'Amount' },{dim: 3,name: 'Score',type: 'category',data: ['Excellent', 'Good', 'OK', 'Bad']}],series: {type: 'parallel',lineStyle: {width: 4},data: [[12.99, 100, 82, 'Good'],[9.99, 80, 77, 'OK'],[20, 120, 60, 'Excellent']]}};option && myChart.setOption(option);}
}
</script><style scoped>
#main{width: 100%;height:600px;
}
</style>

雷达图例子
截图：
代码：

<template><div id="main"></div>
</template><script>
import * as echarts from 'echarts';export default {data(){return{}},methods:{},mounted(){console.log('create-----');// 基于准备好的dom，初始化echarts实例var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;const dataBJ = [[55, 9, 56, 0.46, 18, 6, 1],[25, 11, 21, 0.65, 34, 9, 2],[56, 7, 63, 0.3, 14, 5, 3],[33, 7, 29, 0.33, 16, 6, 4],[42, 24, 44, 0.76, 40, 16, 5],[82, 58, 90, 1.77, 68, 33, 6],[74, 49, 77, 1.46, 48, 27, 7],[78, 55, 80, 1.29, 59, 29, 8],[267, 216, 280, 4.8, 108, 64, 9],[185, 127, 216, 2.52, 61, 27, 10],[39, 19, 38, 0.57, 31, 15, 11],[41, 11, 40, 0.43, 21, 7, 12],[64, 38, 74, 1.04, 46, 22, 13],[108, 79, 120, 1.7, 75, 41, 14],[108, 63, 116, 1.48, 44, 26, 15],[33, 6, 29, 0.34, 13, 5, 16],[94, 66, 110, 1.54, 62, 31, 17],[186, 142, 192, 3.88, 93, 79, 18],[57, 31, 54, 0.96, 32, 14, 19],[22, 8, 17, 0.48, 23, 10, 20],[39, 15, 36, 0.61, 29, 13, 21],[94, 69, 114, 2.08, 73, 39, 22],[99, 73, 110, 2.43, 76, 48, 23],[31, 12, 30, 0.5, 32, 16, 24],[42, 27, 43, 1, 53, 22, 25],[154, 117, 157, 3.05, 92, 58, 26],[234, 185, 230, 4.09, 123, 69, 27],[160, 120, 186, 2.77, 91, 50, 28],[134, 96, 165, 2.76, 83, 41, 29],[52, 24, 60, 1.03, 50, 21, 30],[46, 5, 49, 0.28, 10, 6, 31]];const dataGZ = [[26, 37, 27, 1.163, 27, 13, 1],[85, 62, 71, 1.195, 60, 8, 2],[78, 38, 74, 1.363, 37, 7, 3],[21, 21, 36, 0.634, 40, 9, 4],[41, 42, 46, 0.915, 81, 13, 5],[56, 52, 69, 1.067, 92, 16, 6],[64, 30, 28, 0.924, 51, 2, 7],[55, 48, 74, 1.236, 75, 26, 8],[76, 85, 113, 1.237, 114, 27, 9],[91, 81, 104, 1.041, 56, 40, 10],[84, 39, 60, 0.964, 25, 11, 11],[64, 51, 101, 0.862, 58, 23, 12],[70, 69, 120, 1.198, 65, 36, 13],[77, 105, 178, 2.549, 64, 16, 14],[109, 68, 87, 0.996, 74, 29, 15],[73, 68, 97, 0.905, 51, 34, 16],[54, 27, 47, 0.592, 53, 12, 17],[51, 61, 97, 0.811, 65, 19, 18],[91, 71, 121, 1.374, 43, 18, 19],[73, 102, 182, 2.787, 44, 19, 20],[73, 50, 76, 0.717, 31, 20, 21],[84, 94, 140, 2.238, 68, 18, 22],[93, 77, 104, 1.165, 53, 7, 23],[99, 130, 227, 3.97, 55, 15, 24],[146, 84, 139, 1.094, 40, 17, 25],[113, 108, 137, 1.481, 48, 15, 26],[81, 48, 62, 1.619, 26, 3, 27],[56, 48, 68, 1.336, 37, 9, 28],[82, 92, 174, 3.29, 0, 13, 29],[106, 116, 188, 3.628, 101, 16, 30],[118, 50, 0, 1.383, 76, 11, 31]];const dataSH = [[91, 45, 125, 0.82, 34, 23, 1],[65, 27, 78, 0.86, 45, 29, 2],[83, 60, 84, 1.09, 73, 27, 3],[109, 81, 121, 1.28, 68, 51, 4],[106, 77, 114, 1.07, 55, 51, 5],[109, 81, 121, 1.28, 68, 51, 6],[106, 77, 114, 1.07, 55, 51, 7],[89, 65, 78, 0.86, 51, 26, 8],[53, 33, 47, 0.64, 50, 17, 9],[80, 55, 80, 1.01, 75, 24, 10],[117, 81, 124, 1.03, 45, 24, 11],[99, 71, 142, 1.1, 62, 42, 12],[95, 69, 130, 1.28, 74, 50, 13],[116, 87, 131, 1.47, 84, 40, 14],[108, 80, 121, 1.3, 85, 37, 15],[134, 83, 167, 1.16, 57, 43, 16],[79, 43, 107, 1.05, 59, 37, 17],[71, 46, 89, 0.86, 64, 25, 18],[97, 71, 113, 1.17, 88, 31, 19],[84, 57, 91, 0.85, 55, 31, 20],[87, 63, 101, 0.9, 56, 41, 21],[104, 77, 119, 1.09, 73, 48, 22],[87, 62, 100, 1, 72, 28, 23],[168, 128, 172, 1.49, 97, 56, 24],[65, 45, 51, 0.74, 39, 17, 25],[39, 24, 38, 0.61, 47, 17, 26],[39, 24, 39, 0.59, 50, 19, 27],[93, 68, 96, 1.05, 79, 29, 28],[188, 143, 197, 1.66, 99, 51, 29],[174, 131, 174, 1.55, 108, 50, 30],[187, 143, 201, 1.39, 89, 53, 31]];const lineStyle = {width: 1,opacity: 0.5};
option = {backgroundColor: '#161627',title: {text: '雷达图',left: 'center',textStyle: {color: '#eee'}},legend: {bottom: 5,data: ['Beijing', 'Shanghai', 'Guangzhou'],itemGap: 20,textStyle: {color: '#fff',fontSize: 14},selectedMode: 'single'},radar: {indicator: [{ name: 'AQI', max: 300 },{ name: 'PM2.5', max: 250 },{ name: 'PM10', max: 300 },{ name: 'CO', max: 5 },{ name: 'NO2', max: 200 },{ name: 'SO2', max: 100 }],shape: 'circle',splitNumber: 5,axisName: {color: 'rgb(238, 197, 102)'},splitLine: {lineStyle: {color: ['rgba(238, 197, 102, 0.1)','rgba(238, 197, 102, 0.2)','rgba(238, 197, 102, 0.4)','rgba(238, 197, 102, 0.6)','rgba(238, 197, 102, 0.8)','rgba(238, 197, 102, 1)'].reverse()}},splitArea: {show: false},axisLine: {lineStyle: {color: 'rgba(238, 197, 102, 0.5)'}}},series: [{name: 'Beijing',type: 'radar',lineStyle: lineStyle,data: dataBJ,symbol: 'none',itemStyle: {color: '#F9713C'},areaStyle: {opacity: 0.1}},{name: 'Shanghai',type: 'radar',lineStyle: lineStyle,data: dataSH,symbol: 'none',itemStyle: {color: '#B3E4A1'},areaStyle: {opacity: 0.05}},{name: 'Guangzhou',type: 'radar',lineStyle: lineStyle,data: dataGZ,symbol: 'none',itemStyle: {color: 'rgb(238, 197, 102)'},areaStyle: {opacity: 0.05}}]
};option && myChart.setOption(option);}
}
</script><style scoped>
#main{width: 100%;height:600px;
}
</style>

好咯，前端可视化还是蛮高级的，它让人看起来高大尚！eCharts是挺好的，它还能3d展示和矢量展示！

前端可视化组件库-Apache ECharts简单介绍vue框架使用eCharts例子相关推荐

Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
推荐 8 个支持 Vue3 的前端 UI 组件库，免费开源、漂亮美观，涵盖常用的业务组件
Vue3 正式发布已经快2年了,今年2月也正式变成 Vue 项目的默认版本,今天分享8个优秀的 Vue3 UI 组件库. Element Plus 相关网址:https://www.thosefree ...
PrimeVue - 基于 Vue 3 的免费开源、定制性强的前端 UI 组件库
来自国外的一个优秀的前端 UI 组件库,基于 Vue 3 很有特色,值得研究学习和上手使用. PrimeVue 介绍 PrimeVue 是一套非常优秀的 Vue UI 组件库,支持 Vue 3 的 w ...
30组常用前端开发组件库，前端组件收集整理列表
0. 前端自动化前端构建工具 gulp – The streaming build system grunt – the JavaScript Task Runner 前端模块管理器 Bower – ...
一些热门的前端UI组件库(附用例)
1.Vuetify(Vue) Vuetify 官网是一个纯手工精心打造的 Material 样式的 Vue UI 组件库. 不需要任何设计技能 - 创建叹为观止的应用程序所需的一切都触手可及. 这是 ...
Naive UI - 火热出炉！基于 Vue 3.0/TypeScript 的免费开源前端 UI 组件库
非大厂 KPI 项目!开源三天就收获 800 Star,还获得 Vue 作者尤雨溪的官方推荐. 关于 Naive UI Naive UI 是一款基于当前比较新的 Vue 3.0/TypeScript ...
前端流程图组件库大对比
前端流程图组件库框架对比框架技术核心是否开源是否使用过背景备注 GoJS canvas 和svg 核心代码进行了混淆融合系统使用过国外商业公司功能强大,图的种类极多,灵活,商业版本 ...
人脸识别开源库face_recognition的简单介绍
人脸识别开源库face_recognition的简单介绍原文出处: https://blog.xugaoxiang.com/ai/face-recognition-cnn.html 软硬件环境 ub ...
搭建前端UI组件库（一）—— 构思
本文讲述了搭建组件库前期的准备工作.主要是为了更了解UI组件库相关的知识. 这是自己边看边想边构思写的文档(俗话说知己知彼才能百战百胜嘛)所以先了解一下组件库的相关知识.开发的干货在第二章(还没放上来 ...

前端可视化组件库-Apache ECharts简单介绍vue框架使用eCharts例子

前端可视化组件库-Apache ECharts简单介绍vue框架使用eCharts例子相关推荐

最新文章

热门文章