经常在管理后台 使用到echarts 图表工具 显示数据
在此进行简单组件封装使用
在使用前请转 echarts 官网文档 了解
vue项目使用： 先引入
ECharts CDN :
NPM : npm install echarts --save || cnpm install echarts --save
在这里使用的是NMP方法 引入
创建组件vue文件 wkCharts.vue
<template>
<div :class="className"
:style="{height:height,width:width}" />
</template>
<script>
import echarts from "echarts"
export default {
props: {
// class 为 当前图表的唯一标识
className: {
type: String,
default: "chart"
},
width: {
type: String,
default: "100%"
},
height: {
type: String,
default: "350px"
},
// option 为图表数据 包括呈现的方式 数据
optionData: {}
},
data() {
return {
chart: null,
getData: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#000'
}
}
},
grid: {
left: '2%',
right: '2%',
bottom: '3%',
top: '10%',
containLabel: true
},
legend: {},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: ' ',
min: 0,
axisLabel: {
formatter: '{value} '
}
},
],
series: []
}
}
},
// 监听数据变化 进行试试刷新
watch: {
optionData (n) {
if (n) {
this.$nextTick(() => {
this.chart.setOption(this.optionData, true) //设置为true时不会合并数据，而是重新刷新数据
})
}
}
},
mounted() {
// 防止未加载完毕 报错
this.$nextTick(() => {
this.chart = echarts.init(this.$el, "macarons")
this.chart.setOption(this.getData)
});
},
// 关闭 及 删除图表
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
}
};
</script>
使用只需引入 传入图表数据 图表宽高 具体图表数据格式 请查阅官方文档
使用示例：
<template>
<div class="contentr">
<wk-charts className="echary" :optionData="option" class="echary" ref="echary"></wk-charts>
</div>
</template>
<script>
import wkChart from '@/components/wkCharts'
export default {
name: "dataEcharts",
data() {
return {
option: {}
}
},
components: {
wkCharts
},
created () {
},
async mounted() {
let dataName = ['订单数量', '同比', '环比']
let option = JSON.parse(JSON.stringify(this.$refs.echary.getData))
let series = []
option.legend.data = dataName
option.grid.top = '15%'
option.xAxis[0].data = ['业务一部', '业务二部', '业务三部', '业务四部', '沈阳分公司', '天津分公司']
dataName.map(res => {
if (res !== '订单数量') {
series.push({name: res, type: 'line', data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0]})
} else {
series.push({name: res, type: 'bar', data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0]})
}
})
option.series = series
this.option = JSON.parse(JSON.stringify(option))
// 示例数据
let optionDatas = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
// 工具栏
toolbox: {
feature: {
// 显示表格数据
dataView: {show: true, readOnly: false},
// 切换为 k线图 或柱形图
magicType: {show: true, type: ['line', 'bar']},
// 刷新
restore: {show: true},
// 保存为本地图片
saveAsImage: {show: true}
}
},
// 说明 数据与 series 的name值对应 才会显示
legend: {
data: ['蒸发量', '降水量', '温度', '光照', '平均温度']
},
xAxis: [
// 设置x轴底部显示的标题数据 及样式
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],
axisPointer: {
type: 'shadow'
},
axisLine: {
lineStyle: {
color: 'red'
}
}
}
],
yAxis: [
// 显示样式设置 此处显示两个 y轴 看个人需求 是一个就写一个
{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
},
axisLine: {
lineStyle: {
color: 'red'
}
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
},
axisLine: {
lineStyle: {
color: 'blue'
}
}
}
],
series: [
// bar 为柱形图 一个隔断 分为四个柱形 外加一个line K线图 数据全放在series
{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0],
stack: '同', // 名称相同 数据呈现在同一柱形图上 上下呈现
color: 'red',
itemStyle: {
normal: {
label: {
show: false, //开启显示数据图上的数值
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'red',
fontSize: 12
}
}
}
}
},
{
name: '降雨量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8],
color: 'pink',
itemStyle: {
normal: {
label: {
show: false, //开启显示数据图上的数值
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'pink',
fontSize: 12
}
}
}
}
},
{
name: '温度',
type: 'bar',
data: [2.6, 2.9, 1.0,26.4, 28.7, 70.7, 15.6, 12.2, 2.7, 38.8],
color: 'blue',
itemStyle: {
normal: {
label: {
show: false, //开启显示数据图上的数值
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'blue',
fontSize: 12
}
}
}
}
},
{
name: '光照',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 20.7, 11.6, 112.2, 48.7, 18.8],
itemStyle: {
normal: {
label: {
show: false, //开启显示数据图上的数值
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 12
}
}
}
}
},
{
name: '平均温度',
type: 'line',
yAxisIndex: 0,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 10],
color: 'rgb(64, 158, 255)',
itemStyle: {
normal: {
label: {
show: false, //开启显示数据图上文字
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'rgb(64, 158, 255)',
fontSize: 12
}
}
}
}
}
]
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>
备注：type: 'bar' 为柱形图 ！type: 'line'为折线图 ！ 柱形图 多条数据叠加成一跟柱子 在需要叠加成一根的 数据内 添加 stack: '同', 值为相同
就此简单封装结束
