项目引入Echarts.js
- npm install echarts
- 准备容器
- 生成echart实例
- 实例.setOption({}) # 一堆的配置...
### Card.lineChart.index.vue
<template>
<!--容器-->
<div class="charts" ref="charts"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: "",
mounted() {
// 实例
let lineCharts = echarts.init(this.$refs.charts);
// 一堆配置
lineCharts.setOption({
xAxis: {
//隐藏x轴
show: false,
type: "category",
},
yAxis: {
//隐藏y轴
show: false,
},
//系列
series: [
{
type: "line",
data: [10, 7, 33, 12, 48, 9,29,10,44],
//拐点的样式的设置(完全透明意味着只展示'顶点')
itemStyle: {
opacity: 0,
},
//线条的样式
lineStyle: {
color: "purple",
},
//填充颜色设置(弄成渐变的效果)
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "purple", // 0% 处的颜色
},
{
offset: 1,
color: "#fff", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
],
//布局调试
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
});
}
}
</script>
<style scoped>
.charts {
width: 100%;
height: 100%;
}
</style>
### Card.index.vue 展示折线图
<template>
<div>
<el-row :gutter="10">
<!--总共24个空间-->
<el-col :span="6">
......
</el-col>
<el-col :span="6">
<el-card>
<Detail title="访问量" count=12306>
<!--插入组件-->
<template slot="charts">
<LineChart></LineChart>
</template>
<template slot="footer">
<span>日访问量1234</span>
</template>
</Detail>
</el-card>
</el-col>
<el-col :span="6">
......
</el-col>
<el-col :span="6">
......
</el-col>
</el-row>
</div>
</template>
<script>
import Detail from './Detail'
import LineChart from './lineChart'
export default {
name:'',
components:{
Detail,
LineChart,
}
}
</script>
<style>
</style>
### Card.barCharts.vue
<template>
<!-- 容器 -->
<div class="charts" ref="charts"></div>
</template>
<script>
//引入echarts
import echarts from "echarts";
export default {
name: "",
mounted() {
//初始化echarts实例
let lineCharts = echarts.init(this.$refs.charts);
//配置数据
lineCharts.setOption({
xAxis: {
//隐藏x轴
show: false,
//均分
type: "category",
},
yAxis: {
//隐藏y轴
show: false,
},
//系列
series: [
{
//图标形式-柱状图
type: "bar",
data: [10, 7, 33, 12, 48, 9,29,10,44],
color:'cyan'
},
],
//布局调试
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
tooltip:{}
});
},
};
</script>
<style scoped>
.charts {
width: 100%;
height: 100%;
}
</style>
### Card.progressChart.index.vue
<template>
<!-- 容器 -->
<div class="charts" ref="charts"></div>
</template>
<script>
//引入echarts
import echarts from "echarts";
export default {
name: "",
mounted() {
//初始化echarts实例
let lineCharts = echarts.init(this.$refs.charts);
//配置数据
lineCharts.setOption({
xAxis: {
//隐藏x轴
show: false,
//最小值与最大值的设置
min: 0,
max: 100,
},
yAxis: {
//隐藏y轴
show: false,
//均分
type: "category",
},
//系列
series: [
{
//图标形式-柱状图
type: "bar",
data: [78],
color: "cyan",
//柱状图的宽度
barWidth: 10,
color: "yellowgreen",
//背景颜色设置
showBackground: true,
//设置背景颜色
backgroundStyle: {
color: "#eee",
},
//文本标签
label:{
show:true,
//改变文本内容
formatter:'|',
//文本标签位置调试
position:'right'
}
},
],
//布局调试
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
});
},
};
</script>
<style scoped>
.charts {
width: 100%;
height: 100%;
}
</style>
### Card.index.vue
<template>
<div>
<el-row :gutter="10">
<!--总共24个空间-->
<el-col :span="6">
......
</el-col>
<el-col :span="6">
......
</el-col>
<el-col :span="6">
<el-card>
<Detail title="支付笔数" count=12306>
<template slot="charts">
<!--饼状图-->
<BarChart></BarChart>
</template>
......
</Detail>
</el-card>
</el-col>
<el-col :span="6">
<el-card>
<Detail title="运营活动效果" count=78%>
<template slot="charts">
<!--进度条图-->
<ProgressChart></ProgressChart>
</template>
......
</Detail>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import Detail from './Detail'
import LineChart from './lineChart'
import ProgressChart from './progressChart'
import BarChart from './barCharts'
export default {
name:'',
components:{
Detail,
LineChart,
ProgressChart,
BarChart
}
}
</script>
<style>
</style>