一、象形柱图
1、vue中使用象形柱图
效果图：
2、代码实现
<template>
<div :class="className" :style="{height:height,width:width}"/>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '30%'
},
height: {
type: String,
default: '300px'
},
border: {
type: String,
default: '1px solid red'
},
optionTest:{}
},
data() {
return {
myChart: null,
option: undefined
}
},
mounted() {
this.init()
},
methods: {
//初始化构建
init() {
//设备高度;
var towerHight = 3;
var timerKpi;
var level = parseFloat(Math.random() * 3 + 0.1).toFixed(2);
if (level >= 3) {
level = 2.99;
}
var dataList = parseFloat(level * 100 / towerHight).toFixed(2);
//渲染图表;
this.makeBar(dataList, level, this.getBgColor(level), "charts");
clearInterval(timerKpi);
const _this = this;
setInterval(function () {
var level = parseFloat(Math.random() * 3 + 0.1).toFixed(2);
if (level >= 3) {
level = 2.99;
}
var dataList = parseFloat(level * 100 / towerHight).toFixed(2);
//渲染图表;
_this.makeBar(dataList, level, _this.getBgColor(level), "charts");
}, 3000);
},
// 基于准备好的dom，初始化echarts实例;
makeBar(dataList, level, colorList, id) {
this.myChart = echarts.init(this.$el, 'macarons')
this.option = {
tooltip: {
trigger: 'none'
},
xAxis: {
data: [''],
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
series: [{
name: '最上层立体圆',
type: 'pictorialBar',
animation: false,
symbolSize: [300, 45],
symbolOffset: [0, -20],
z: 12,
itemStyle: {
normal: {
color: '#363F5E'
}
},
data: [{
value: 100,
symbolPosition: 'end'
}]
}, {
name: '中间立体圆',
animation: false,
type: 'pictorialBar',
symbolSize: [300, 45],
symbolOffset: [0, -20],
z: 12,
itemStyle: {
normal: {
color: colorList
}
},
data: [{
value: dataList,
symbolPosition: 'end'
}]
}, {
name: '最底部立体圆',
animation: false,
type: 'pictorialBar',
symbolSize: [300, 45],
symbolOffset: [0, 20],
z: 12,
itemStyle: {
normal: {
color: colorList
}
},
data: [100 - dataList]
}, {
//底部立体柱
stack: '1',
animation: false,
type: 'bar',
itemStyle: {
normal: {
color: colorList,
opacity: .7
}
},
label: {
show: true,
position: 'inside',
color: "#FFFE00",
fontSize: 50,
formatter: function () {
return level + " 米";
}
},
silent: true,
barWidth: 300,
barGap: '-100%', // Make series be overlap
data: [dataList]
}, {
//上部立体柱
stack: '1',
type: 'bar',
animation: false,
itemStyle: {
normal: {
color: '#36405E',
opacity: .7
}
},
silent: true,
barWidth: 300,
barGap: '-100%', // Make series be overlap
data: [100 - dataList]
}]
};
this.myChart.setOption(this.option);
window.addEventListener("resize", function () {
this.myChart.resize();
});
},
//获取背景色;
getBgColor(num) {
var min = '1', max = '2';
if (num > max) {
return '#DB2F2C'
}
if (num >= min && num <= max) {
return '#438a7a'
}
if (num < min) {
return '#3EC6F0'
}
}
}
}
</script>
<style>
.chart{
background-size: 60% 60%;
/* background:rgba(34,34,34,0.5); */
}
</style>二、水球图
1、vue中使用水球图
效果：
2、代码实现
1）依赖下载
npm install echarts@4.9.0 --save
npm install echarts-liquidfill@2.0.6 --save
2）源码
<template>
<div class='wrapper'>
<div class="inner">
<div class='chart' id='chart'></div>
<div class="btm"></div>
</div>
</div>
</template>
<script>
import 'echarts-liquidfill'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '300px'
},
height: {
type: String,
default: '300px'
},
optionTest:{}
},
data () {
return {}
},
mounted () {
this.drawChart()
},
methods: {
drawChart () {
// 基于准备好的dom，初始化echarts实例
// let chart = echarts.init(this.$el, 'macarons')
let chart = echarts.init(document.getElementById('chart'))
// 监听屏幕变化自动缩放图表
window.addEventListener('resize', function () {
chart.resize()
})
// 绘制图表
chart.setOption({
// 图表主标题
title: {
text: '全国就业率', // 主标题文本，支持使用 \n 换行
top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
left: 'center', // 值: 'left', 'center', 'right' 同上
textStyle: { // 文本样式
fontSize: 30,
fontWeight: 600,
color: 'black'
}
},
// 提示框组件
tooltip: {
trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
textStyle: {
color: '#fff' // 文字颜色
},
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
// 水球图: {a}（系列名称），{b}（无），{c}（数值）
// 使用函数模板 传入的数据值 -> value: number|Array,
formatter: function (value) {
return value.seriesName + ': ' + value.data * 100 + '%'
}
},
series: [{
type: 'liquidFill',
name: '全国就业率', // 系列名称，用于tooltip的显示，legend 的图例筛选
radius: '62%', // 水球图的半径
center: ['50%', '60%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
// 水填充图的形状 circle 默认圆形 rect 圆角矩形 triangle 三角形
// diamond 菱形 pin 水滴状 arrow 箭头状 还可以是svg的path
shape: 'circle',
phase: 0, // 波的相位弧度 不设置 默认自动
direction: 'right', // 波浪移动的速度 两个参数 left 从右往左 right 从左往右
outline: {
show: true,
borderDistance: 0, // 边框线与图表的距离 数字
itemStyle: {
opacity: 1, // 边框的透明度 默认为 1
borderWidth: 1, // 边框的宽度
shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
shadowColor: '#fff', // 边框的阴影颜色,
borderColor: '#41dcd8' // 边框颜色
}
},
// 图形样式
itemStyle: {
color: '#4077eb', // 水球显示的背景颜色
opacity: 0.5, // 波浪的透明度
shadowBlur: 10 // 波浪的阴影范围
},
backgroundStyle: {
color: '#407bf3', // 水球未到的背景颜色
opacity: 0.5
},
// 图形的高亮样式
emphasis: {
itemStyle: {
opacity: 0.8 // 鼠标经过波浪颜色的透明度
}
},
// 图形上的文本标签
label: {
fontSize: 55,
fontWeight: 400,
color: '#fff'
},
data: [0.62] // 系列中的数据内容数组
}]
})
}
}
}
</script>
<style scoped>
.wrapper {
width: 100%;
}
.wrapper .inner {
position: relative;
width: 50%;
height: 500px;
border: 1px solid #eeeeee;
margin: 100px 50px 0;
background: url(../../../assets/images/bg.png) no-repeat;
background-size: 100% 100%;
}
.wrapper .inner .chart {
width: 400px;
height: 400px;
background: url(../../../assets/images/fill-border.gif) no-repeat center bottom;
background-size: 80% 80%;
margin: 10px auto 0;
}
.wrapper .inner .btm {
width: 320px;
height: 25px;
background: url(../../../assets/images/icon-bot.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto;
}
</style>
三、液位柱子图
1、vue中使用液位柱子图
效果：
2、代码实现
<template>
<div class='chart' id='chart'></div>
</template>
<script>
import 'echarts-liquidfill'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
data() {
return {
maxData: 100,
value: 50
}
},
mounted() {
this.drawChart()
},
methods: {
drawChart() {
// 基于准备好的dom，初始化echarts实例
// let chart = echarts.init(this.$el, 'macarons')
let chart = echarts.init(document.getElementById('chart'))
// 监听屏幕变化自动缩放图表
window.addEventListener('resize', function () {
chart.resize()
})
// 绘制图表
chart.setOption({
xAxis: {
show: false,
data: [0],
},
yAxis: {
max: this.maxData,
type: 'value',
show: false,
},
grid: {
top: '15',
bottom: '-5',
right: '0',
left: '-30',
containLabel: true,
},
series: [
{
// 柱子
type: 'bar',
barWidth: 60,
showBackground: true,
// label: {
// show: true,
// formatter: '{c}%',
// color: 'white',
// align: 'center',
// verticalAlign: 'middle',
// },
backgroundStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgb(46 178 255)' },
{ offset: 1, color: 'white' },
]),
},
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: '#0095ff' },
{ offset: 0.5, color: '#04e6fd' },
{ offset: 1, color: '#0095ff' },
]),
},
data: [this.value],
z: 1,
},
{
type: 'scatter',
data: [this.value > 100 ? 100 : this.value],
symbolSize: [60, 16],
label: {
show: true,
color: 'white',
formatter: `${this.value}%`,
offset: [0, 1]
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#0095ff' },
{ offset: 1, color: '#48fcff' },
]),
},
cursor: 'auto',
emphasis: {
disabled: true,
},
z: 11
},
{
// 顶盖
type: 'pictorialBar',
animationDuration: 0,
barWidth: '60',
symbolSize: ['100%', 16],
symbolRepeat: false,
symbolMargin: '0',
symbolPosition: 'end',
symbolOffset: [0, -8],
symbolBoundingData: this.maxData,
legendHoverLink: false,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#0059a5' },
{ offset: 1, color: '#0095ff' },
]),
},
cursor: 'auto',
emphasis: {
disabled: true,
},
data: [0],
z: 10,
},
{
// 底座
type: 'pictorialBar',
animationDuration: 0,
barWidth: '60',
symbolRepeat: false,
symbolMargin: '0',
symbolPosition: 'start',
symbolOffset: [0, 8],
symbolSize: ['100%', 16],
symbolBoundingData: this.maxData,
legendHoverLink: false,
emphasis: {
disabled: true,
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#0095ff' },
{ offset: 1, color: '#48fcff' },
]),
},
data: [0],
z: 10,
},
],
})
}
}
}
</script>
<style scoped>
.chart {
width: 400px;
height: 400px;
}
</style>
