首先引入Echarts.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
//图标的标题
title: {
text: '第一个 ECharts 实例'
},
// 提示框
tooltip: {},
// 图例
legend: {
data:['销量']
},
// x轴
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
// y轴
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
实现效果：
折线统计图，柱状图，饼状图的实现
在项目中安装echarts
npm install echarts --S
在Home.vue中引入echarts
<el-card shadom="hover" style="height:280px" >
<!-- <div style="height:280px;width=100%" ref="echart" ></div> -->
<echart :chartData="echartData.order" style="height:280px"></echart>
</el-card>
<div class="graph">
<el-card shadom="hover" style="height:260px">
<!-- <div style="height:240px" ref="userEchart"></div> -->
<echart :chartData="echartData.user" style="height:240px"></echart>
</el-card>
<el-card shadom="hover" style="height:260px">
<!-- <div style="height:240px" ref="videoEchart"></div> -->
<echart :chartData="echartData.video" style="height:240px" :isAxisChart="false">
</echart>
</el-card>
</div>
<script>
import { getHome } from '../../api/data';
// import * as echarts from "echarts";
import Echart from '@/components/ECharts.vue'
export default {
components:{
Echart,
},
data() {
return {
userImg: require("../../assets/images/user.png"),
tableData: [],
tableLabel: {},
countData: [],
echartData:{
order:{
xData:[],
series:[],
},
user:{
xData:[],
series:[],
},
video:{
series:[],
}
}
};
},
methods:{
getTableData(){
getHome().then((res)=>{
this.tableData=res.data.tableData;
// 折线图的展示
const order=res.data.orderData;
// console.log(order);
// this.echartsData.order.xAxis.data=order.date;
let keyArray=Object.keys(order.data[0]);
// keyArray.forEach((key)=>{
// this.echartsData.order.series.push({
// name:key,
// data:order.data.map((item)=>item[key]),
// type:'line',
// })
// })
// const myEchartsOrder= echarts.init(this.$refs.echart);
// myEchartsOrder.setOption(this.echartsData.order);
// 传给组件的值
this.echartData.order.xData=order.date;
keyArray.forEach((key)=>{
this.echartData.order.series.push({
name:key,
data:order.data.map((item)=>item[key]),
type:'line',
})
})
// 用户图
this.echartData.user.xData=res.data.userData.map((item)=>item.date);
this.echartData.user.series.push({
name:'新增用户',
data:res.data.userData.map((item)=>item.new),
type:'bar',
})
this.echartData.user.series.push({
name:'活跃用户',
data:res.data.userData.map((item)=>item.active),
type:'bar',
})
// this.echartsData.user.xAxis.data=res.data.userData.map((item)=>item.date);
// console.log( this.echartsData.user.xAxis.data);
// this.echartsData.user.series.push({
// name:'新增用户',
// data:res.data.userData.map((item)=>item.new),
// type:'bar',
// })
// this.echartsData.user.series.push({
// name:'活跃用户',
// data:res.data.userData.map((item)=>item.active),
// type:'bar',
// })
// const myEchartsUser= echarts.init(this.$refs.userEchart);
// myEchartsUser.setOption(this.echartsData.user);
// 饼状图
this.echartData.video.series.push({
data:res.data.videoData,
type:"pie",
})
// this.echartsData.video.series.push({
// data:res.data.videoData,
// type:"pie",
// })
// const myEchartsvideo= echarts.init(this.$refs.videoEchart);
// myEchartsvideo.setOption(this.echartsData.video);
})
}
},
mounted(){
this.getTableData()
}
};
</script>
在src文件夹下api文件夹下mockServeData文件夹下home.js
// mock数据模拟
import Mock from 'mockjs'
// 图表数据
let List = []
export default {
getStatisticalData: () => {
//Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位
for (let i = 0; i < 7; i++) {
List.push(
Mock.mock({
苹果: Mock.Random.float(100, 8000, 0, 0),
vivo: Mock.Random.float(100, 8000, 0, 0),
oppo: Mock.Random.float(100, 8000, 0, 0),
魅族: Mock.Random.float(100, 8000, 0, 0),
三星: Mock.Random.float(100, 8000, 0, 0),
小米: Mock.Random.float(100, 8000, 0, 0)
})
)
}
return {
code: 20000,
data: {
// 饼图
videoData: [
{
name: '小米',
value: 2999
},
{
name: '苹果',
value: 5999
},
{
name: 'vivo',
value: 1500
},
{
name: 'oppo',
value: 1999
},
{
name: '魅族',
value: 2200
},
{
name: '三星',
value: 4500
}
],
// 柱状图
userData: [
{
date: '周一',
new: 5,
active: 200
},
{
date: '周二',
new: 10,
active: 500
},
{
date: '周三',
new: 12,
active: 550
},
{
date: '周四',
new: 60,
active: 800
},
{
date: '周五',
new: 65,
active: 550
},
{
date: '周六',
new: 53,
active: 770
},
{
date: '周日',
new: 33,
active: 170
}
],
// 折线图
orderData: {
date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
data: List
},
tableData: [
{
name: 'oppo',
todayBuy: 500,
monthBuy: 3500,
totalBuy: 22000
},
{
name: 'vivo',
todayBuy: 300,
monthBuy: 2200,
totalBuy: 24000
},
{
name: '苹果',
todayBuy: 800,
monthBuy: 4500,
totalBuy: 65000
},
{
name: '小米',
todayBuy: 1200,
monthBuy: 6500,
totalBuy: 45000
},
{
name: '三星',
todayBuy: 300,
monthBuy: 2000,
totalBuy: 34000
},
{
name: '魅族',
todayBuy: 350,
monthBuy: 3000,
totalBuy: 22000
}
]
}
}
}
}
封装echarts
在src文件夹下的components文件夹下新建ECharts.vue组件
<template>
<div ref="echart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
props:{
chartData:{
type:Object,
default(){
return{
xData:[],
series,
}
}
},
isAxisChart:{
type:Boolean,
default:true,
}
},
watch:{
chartData:{
handler:function(){
this.initChart()
},
deep:true
}
},
computed:{
options(){
return this.isAxisChart ?this.axisOption:this.normalOpiton
}
},
methods:{
initChart(){
this.initChartData();
// 设置echarts表格
if(this.echart){
this.echart.setOption(this.options);
}else{
this.echart=echarts.init(this.$refs.echart);
this.echart.setOption(this.options);
}
},
initChartData(){
if(this.isAxisChart){
this.axisOption.xAxis.data=this.chartData.xData;
this.axisOption.series=this.chartData.series; }else{
this.normalOpiton.series=this.chartData.series;
}
}
},
data() {
return {
axisOption: {
legend: {
// 图例文字颜色
textStyle: {
color: "#333",
},
},
grid: {
left: "20%",
},
// 提示框
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category", // 类目轴
data: [],
axisLine: {
lineStyle: {
color: "#17b3a3",
},
},
axisLabel: {
interval: 0,
color: "#333",
},
},
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#17b3a3",
},
},
},
],
color: [
"#2ec7c9",
"#b6a2de",
"#5ab1ef",
"#ffb980",
"#d87a80",
"#8d98b3",
],
series: [],
},
normalOpiton: {
tooltip: {
trigger: "item",
},
color: [
"#0f78f4",
"#dd536b",
"#9462e5",
"#a6a6a6",
"#e1bb22",
"#39c362",
"#3ed1cf",
],
series: [],
},
echart:null,
};
},
};
</script>
实现效果：
