VUE的element-ui+echarts视图可视化
template
创新互联作为成都网站建设公司，专注成都网站建设、网站设计，有关成都企业网站定制方案、改版、费用等问题，行业涉及成都建筑动画等多个领域，已为上千家企业服务，得到了客户的尊重与认可。
div class="bar-chart"
div id="main" ref="main"
/div
/div
/template
script
/* 引入echarts组件 */
import * as echarts from 'echarts';
export default {
name:"BarChart",
mounted(){
// 基于准备好的dom，初始化echarts实例
/* var myChart = echarts.init(document.getElementById('main')); */
var myChart = echarts.init(this.$refs.main);
// 绘制图表
myChart.setOption({
title: {
text: '柱状图'
},
tooltip: {},
xAxis: {
axisLabel: {
/* 显示所有的x轴的数据 */
interval: 0,
/* 放不下的倾斜角度 */
rotate: 80,
/* 数据距离刻度线的距离 */
margin: 15,
},
/* data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] */
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
/* data: [5, 20, 36, 10, 10, 20] */
data:[{
value:5,
name:'衬衫',
/* 给某一柱子单独设置颜色 */
itemStyle:{
color:{
type:"linear",
x:0,
y:0,
x2:0,
y2:1,
colorStops:[
{
offset:0,
color:"red"//柱子最上面是红色
},{
offset:1,
color:'blue'//柱子最下面颜色蓝色
}
],
global:false
},
},
},
{
value:36,
name:'雪纺衫',
itemStyle:{
color:{
type:"linear",
x:0,
y:0,
x2:0,
y2:1,
colorStops:[
{
offset:0,
color:"pink"//柱子最上面是粉色
},{
offset:1,
color:'yellow'//柱子最下面颜色黄色
}
],
global:false
},
},
},{
value:10,
name:'裤子'
},{
value:10,
name:'高跟鞋'
},{
value:20,
name:'袜子'
}
]
}
]
});
window.BarChart = myChart
}
}
/script
style scoped lang="scss"
#main{
height: 300px;
}
/style
template
div class="line-chart"
div id="main" ref="main"
/div
/div
/template
script
/* 引入echarts组件 */
import * as echarts from 'echarts';
export default {
name:"LineChart",
mounted(){
// 基于准备好的dom，初始化echarts实例
/* var myChart = echarts.init(document.getElementById('main')); */
var myChart = echarts.init(this.$refs.main);
// 绘制图表
myChart.setOption({
title: {
text: '折线图'
},
tooltip: {},
xAxis: {
axisLabel: {
/* 显示所有的x轴的数据 */
interval: 0,
/* 放不下的倾斜角度 */
rotate: 0,
/* 数据距离刻度线的距离 */
margin: 15,
},
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}
]
});
window.LineChart = myChart
}
}
/script
style scoped lang="scss"
#main{
height: 300px;
}
/style
template
div class="pie-chart"
div id="main" ref="main"
/div
/div
/template
script
/* 引入echarts组件 */
import * as echarts from 'echarts';
export default {
name:"PieChart",
mounted(){
// 基于准备好的dom，初始化echarts实例
/* var myChart = echarts.init(document.getElementById('main')); */
var myChart = echarts.init(this.$refs.main);
/* ref 是dom本身不是id */
// 绘制图表
myChart.setOption({
title: {
text: '饼图'
},
/* grid:{
width:'50%',
height:'50%'
}, */
/* radius:'50%', */
tooltip: {},
xAxis: {
show:false,
/* data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] */
},
yAxis: {
show:false,
},
series: [
{
name: '销量',
type: 'pie',
/* data: [5, 20, 36, 10, 10, 20] */
data:[{
value:5,
name:'衬衫'
},{
value:20,
name:'羊毛衫'
},{
value:36,
name:'雪纺衫'
},{
value:10,
name:'裤子'
},{
value:10,
name:'高跟鞋'
},{
value:20,
name:'袜子'
}
]
}
]
});
window.PieChart = myChart
}
}
/script
style scoped lang="scss"
#main{
height: 300px;
width: 250px;
}
/style
template
div
!-- el-row 表示一行 一行分成了24份
:gutter="12" 表示间隔的大小为12份--
!-- el-col 表示一列 :span="8"表示一列占据一行8份的大小
3个:span="8" 表示占据三行--
el-row :gutter="5"
el-col :span="8"
!-- el-card shadow="always" 卡片阴影效果一直显示 --
!-- shadow="hover" 卡片阴影效果手摸上去显示 --
!-- shadow="never" 阴影效果永不显示--
el-card shadow="always"
bar-chart/bar-chart
/el-card
/el-col
el-col :span="8"
el-card shadow="always"
line-chart/line-chart
/el-card
/el-col
el-col :span="8"
el-card shadow="always"
pie-chart /
/el-card
/el-col
/el-row
el-row :gutter="10" style="margin-top:15px"
el-col :span="24"
el-card shadow="always"
中国地图
/el-card
/el-col
/el-row
/div
/template
script
import BarChart from '@/components/BarChart.vue'
import LineChart from '@/components/LineChart.vue'
import PieChart from '@/components/PieChart.vue'
export default {
components:{
BarChart,
LineChart,
PieChart
},
mounted(){
/* 页面尺寸一边画 就重新 resize 渲染图标*/
window.onresize = function (){
window.BarChart.resize();
window.LineChart.resize();
window.PieChart.resize();
}
}
};
/script
style
/style
又一款基于Vue的数据可视化组件库，Github上star超1.4k，太酷炫
组件库名称：DataV
项目地址：
光看截图就知道太酷炫了，而且根本不需要担心拿在手里会不会用，官方的文档也是非常详细
非常多的组件可以选择，但是相对于收费版的阿里云datav还是很不错的选择，有更好的同类组件库欢迎在下方留言补充
在Vue项目中实现数据可视化操作
话说最近一直在攻在网上花二十块大洋买的vue音乐播放器项目，收获颇多！对vue项目整体的流程有了更进一步的了解，打算花点空余时间把这个项目再撸几遍，然后转入京东的项目实战中。。。
实际工作中一直涉及的是数据可视化操作（Echarts、Highcharts），即大量数据图表展示，却独独没有用到丁点儿的vue知识，感觉实在是让人憋得心慌，晚上没事干脆试验一把，如题：在Vue项目中实现数据可视化操作
Echarts 步骤：
一、安装插件
cnpm install echarts -D
注：echarts 也不能通过 Vue.use() 进行全局调用
所以，通常在需要使用图表的 .vue文件中直接引入
import echarts from 'echarts'
也可以在main.js中引入，然后修改原型链
Vue.prototype.$echarts = echarts
这样在全局中就可以直接使用了
let mychart = this.$echarts.init(document.getElementById('mychart'))
二、创建图表
由于一般情况我们会在组件中使用，这里我也贴近实际开发，举的例子就是应用于组件中
数据导入
这样图表就可以在页面中展示出来了
问题：这里引入的 echarts 包含了所有图表，但有时候我们只需要一两个基本图表，这时候完整的 echarts 就显得累赘，所以：
二、按需引入
// 引入基本模板letecharts = require('echarts/lib/echarts')
// 引入饼图组件require('echarts/lib/chart/pie')
// 引入提示框和图例组件require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
可以按需引入的模块列表见
继续引出问题：在echarts中图表宽高如果不写，那么就相当于作死，所以nozuonodie，所以：
三、适应容器
let chartBox = document.getElementsByClassName('charts')[0]
let myChart = document.getElementById('myChart')
// 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
function resizeCharts () {
myChart.style.width = chartBox.style.width + 'px'
myChart.style.height = chartBox.style.height + 'px'
}
// 设置容器高宽
resizeCharts()
let mainChart = echarts.init(myChart)
mainChart.setOption(options)
四、扩展
可以把这个案例模块化，设计成一个可复用组件，只需传入id、options既可完成图表渲染
参考案例：
刚好，参考案例中用的是highcharts
网站题目：phpvue数据可视化 vue实现数据可视化
当前路径：
http://cdkjz.cn/article/dopgjis.html
