echarts视图可视化官网：https://echarts.apache.org/zh/index.html
进入官网后点击快速上手-在项目中引入ECharts-npm安装：
我们在之前的项目里面写好柱状图、饼图、和折线图三个组件：
BarChart.vue:
<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>
LineChart.vue:
<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>
PieChart.vue:
<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>
在views文件下ReportsView.vue中引入：
<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>
效果图：
