echarts視圖可視化官網(wǎng)：https://echarts.apache.org/zh/index.html
進(jìn)入官網(wǎng)后點(diǎn)擊快速上手-在項(xiàng)目中引入ECharts-npm安裝：
我們?cè)谥暗捻?xiàng)目里面寫好柱狀圖、餅圖、和折線圖三個(gè)組件：
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(){
?// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
?/* var myChart = echarts.init(document.getElementById('main')); */
?var myChart = echarts.init(this.$refs.main);
?// 繪制圖表
myChart.setOption({
? title: {
? ? text: '柱狀圖'
? },
? tooltip: {},
? xAxis: {
? ? ? axisLabel: {
? ? ? ? ? /* 顯示所有的x軸的數(shù)據(jù) */
? ? ? ? ? interval: 0,
? ? ? ? ? /* 放不下的傾斜角度 */
? ? ? ? ? rotate: 80,
? ? ? ? ? /* 數(shù)據(jù)距離刻度線的距離 */
? ? ? ? ? margin: 15,
? ? ? ? },
? ? /* data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] */
? },
? yAxis: {},
? series: [
? ? {
? ? ? name: '銷量',
? ? ? type: 'bar',
? ? ? /* data: [5, 20, 36, 10, 10, 20] */
? ? ? data:[{
? ? ? ? ? value:5,
? ? ? ? ? name:'襯衫',
? ? ? ? ? /* 給某一柱子單獨(dú)設(shè)置顏色 */
? ? ? ? ? itemStyle:{
? ? ? ? ? ? ? color:{
? ? ? ? ? ? ? type:"linear",
? ? ? ? ? ? ? x:0,
? ? ? ? ? ? ? y:0,
? ? ? ? ? ? ? x2:0,
? ? ? ? ? ? ? y2:1,
? ? ? ? ? ? ? colorStops:[
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? offset:0,
? ? ? ? ? ? ? ? ? ? ? color:"red"http://柱子最上面是紅色
? ? ? ? ? ? ? ? ? },{
? ? ? ? ? ? ? ? ? ? ? offset:1,
? ? ? ? ? ? ? ? ? ? ? color:'blue'//柱子最下面顏色藍(lán)色
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ],
? ? ? ? ? ? ? global:false
? ? ? ? ? },
? ? ? ? },
? ? ? },
? ? ? {
? ? ? ? ? value:36,
? ? ? ? ? name:'雪紡衫',
? ? ? ? ? itemStyle:{
? ? ? ? ? ? ? color:{
? ? ? ? ? ? ? type:"linear",
? ? ? ? ? ? ? x:0,
? ? ? ? ? ? ? y:0,
? ? ? ? ? ? ? x2:0,
? ? ? ? ? ? ? y2:1,
? ? ? ? ? ? ? colorStops:[
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? offset:0,
? ? ? ? ? ? ? ? ? ? ? color:"pink"http://柱子最上面是粉色
? ? ? ? ? ? ? ? ? },{
? ? ? ? ? ? ? ? ? ? ? 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(){
?// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
?/* var myChart = echarts.init(document.getElementById('main')); */
?var myChart = echarts.init(this.$refs.main);
?// 繪制圖表
myChart.setOption({
? title: {
? ? text: '折線圖'
? },
? tooltip: {},
? xAxis: {
? ? ? axisLabel: {
? ? ? ? ? /* 顯示所有的x軸的數(shù)據(jù) */
? ? ? ? ? interval: 0,
? ? ? ? ? /* 放不下的傾斜角度 */
? ? ? ? ? rotate: 0,
? ? ? ? ? /* 數(shù)據(jù)距離刻度線的距離 */
? ? ? ? ? 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(){
?// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
?/* 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"表示一列占據(jù)一行8份的大小
? ? 3個(gè):span="8" 表示占據(jù)三行-->
? ? ?<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 渲染圖標(biāo)*/
? ? window.onresize = function (){
? ? ? ? window.BarChart.resize();
? ? ? window.LineChart.resize();
? ? ? window.PieChart.resize();
? ? }
? }
};
</script>
<style>
</style>
效果圖：
