记录工作中用到的一些echats图标
1、进度条
有两种方式：
a、通过elemnt-ui组件el-progress组件实现
上面的进度条光使用el-progress无法实现，el-progress不支持汉字，需要使用css+div进行调整
下面是实现的代码：
html:
<div class="content-right-top">
<el-progress
class="content-right-progress"
type="circle"
:show-text="false"
:percentage="45"
:stroke-width="13"
color="#34BFA3"
/>
<div class="content-progress-success">
<div class="progress-success-top">
{{ data }}
</div>
<div class="progress-success-down">完成率</div>
</div>
<div class="content-progress-plan">计划完成率</div>
</div>
:show-text=“false” 不显示组件本来的字体, 我们是用css将字体挪动到进度条的中心
css:
.content-right-top {
width: 100%;
height: 38%;
.el-progress {
margin-left: 5.5vw;
margin-top: 2.2vh;
position: relative;
::v-deep .el-progress-circle {
width: 18.7222vh !important;
height: 18.7222vh !important;
}
::v-deep .el-progress__text {
font-size: 2.8556vh !important;
font-weight: 600;
color: #34BFA3;
line-height: 3.7037vh;
}
}
b、使用echats自定义的特殊的滚动条
代码部分
<template>
<div class="main-dail">
<div class="main-dail-content" style="display: flex">
<div id="main-dial-1" ref="dial" class="main-dail-item" style="width: 23vw; height: 23vh; margin-left: -8vw" />
</div>
</div>
</template>
<script>
export default {
name: 'PlanListDial',
data() {
return {
num: 50
}
},
mounted() {
this.echatsInit()
},
methods: {
echatsInit() {
const echart = this.$echarts.init(document.getElementById('main-dial-1'))
const assistData = []
const colorList = []
const num = this.num
for (let i = 0; i < 50; i++) { // 这里可以通过更改数值进行设置格子宽度，数值越小格子越宽
if (i < num / 2) {
assistData.push({
value: 2
})
colorList.push('#44A0FF')
} else {
assistData.push({
value: 2
})
colorList.push('#8D959F')
}
}
var option = {
// 标题组件，包含主标题和副标题
title: {
show: true,
text: '进度条',
x: 'center',
y: 'bottom',
textStyle: {
fontSize: 25,
fontStyle: 'normal',
fontWeight: 'normal'
}
},
avoidLabelOverlap: false,
graphic: {
type: 'text',
left: 'center',
top: 'center',
style: {
text: num,
textAlign: 'center',
fill: '#44A0FF',
fontSize: 45
}
},
series: [
{
type: 'pie',
color: colorList,
// 饼图的半径，数组的第一项是内半径，第二项是外半径
radius: ['50%', '65%'],
minAngle: 0, // 最小角度改为0
selectedOffset: 1, // 选中是扇区偏移量
// 是否启用防止标签重叠策略，默认开启
avoidLabelOverlap: false,
hoverAnimation: false,
itemStyle: {
normal: {
// color: 各异,
borderColor: '#fff',
borderWidth: 5,
borderRadius: 10,
label: {
show: true,
position: 'outer'
},
labelLine: {
show: true,
length: 20,
lineStyle: {
width: 2,
type: 'solid'
}
}
}
},
// 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
labelLine: {
normal: {
show: false
}
},
data: assistData
}
]
}
echart.setOption(option)
}
}
}
</script>
<style lang="less" scoped>
#main-dial {
main-dail-content {
height: 300px;
width: 300px;
#main-dail-1 {
width: 100px ;
height: 100px;
}
#main-dail-3 {
width: 100px;
height: 100px;
}
}
}
.dial-text {
font-size: 12rem;
color: #44A0FF;
top: 39vh;
right: 70vh;
}
</style>
2、饼状图
这个饼状图比较复杂，这个饼状图弄会的话，其他一些简单的饼状图就很容易实现了，这个可以优化，我功能实现就没有优化了
代码：
<template>
<div id="chart" class="chart" style="width: 40vh; height: 40vh" />
</template>
<script>
export default {
name: 'DispatchManagementKanbanPie',
mounted() {
this.drawChart()
},
methods: {
drawChart() {
// 基于准备好的dom，初始化echarts实例
const echart = this.$echarts.init(document.getElementById('chart'))
var option = {
// 设置
title: {
show: false,
text: '某某班学生当月的考试成绩分布',
subtext: '9月',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c}分 ({d}%)'
},
// 对图例组件的不同系列进行标记说明
legend: [
{
orient: 'horizontal',
x: '5%',
y: '2%',
align: 'left',
textStyle: { fontSize: '15' },
data: ['语文']
},
{
orient: 'horizontal',
x: '25%',
y: '2%',
align: 'left',
textStyle: { fontSize: '15' },
data: ['数学']
},
{
orient: 'horizontal',
x: '45%',
y: '2%',
align: 'left',
textStyle: { fontSize: '15' },
data: ['英语']
},
{
orient: 'horizontal',
x: '65%',
y: '2%',
align: 'left',
textStyle: { fontSize: '15' },
data: ['物理']
},
{
orient: 'horizontal',
x: '5%',
y: '7%',
align: 'left',
textStyle: { fontSize: '15' },
data: ['化学']
},
{
orient: 'horizontal',
x: '25%',
y: '7%',
align: 'left',
textStyle: { fontSize: '15' },
data: ['生物']
}
],
// 系列列表
series: [
{
color: ['#4DCB73', '#FAD337', '#36CBCB', '#975FE4', '#3AA0FF', '#F2637B'],
type: 'pie', // 数据统计图的类型
radius: ['0%', '48%'],
center: ['45%', '50%'],
label: {
normal: {
position: 'inner',
textStyle: { fontSize: '12' },
formatter: function(val) { // 让series 中的文字进行换行
return val.name
}
}
},
// 放置要展示的数据
data: [
{ value: 40, name: '40%' },
{ value: 30, name: '30%' },
{ value: 9, name: '9%' },
{ value: 8, name: '8%' },
{ value: 7, name: '7%' },
{ value: 6, name: '6%' }
]
},
{
color: ['#4DCB73', '#FAD337', '#36CBCB', '#975FE4', '#3AA0FF', '#F2637B'],
type: 'pie', // 数据统计图的类型
radius: ['0%', '48%'],
center: ['45%', '50%'],
label: {
normal: {
textStyle: { fontSize: '15' }
}
},
// 放置要展示的数据
data: [
{ value: 40, name: '40分' },
{ value: 30, name: '30分' },
{ value: 9, name: '9分' },
{ value: 8, name: '8分' },
{ value: 7, name: '7分' },
{ value: 6, name: '6分' }
]
},
{
color: ['#4DCB73', '#FAD337', '#36CBCB', '#975FE4', '#3AA0FF', '#F2637B'],
type: 'pie', // 数据统计图的类型
radius: ['0%', '48%'],
center: ['45%', '50%'],
itemStyle: {
normal: {
label: {
show: false
}
}
},
label: {
normal: {
position: 'inner'
}
},
// 放置要展示的数据
data: [
{ value: 40, name: '语文' },
{ value: 30, name: '数学' },
{ value: 9, name: '英语' },
{ value: 8, name: '物理' },
{ value: 7, name: '化学' },
{ value: 6, name: '生物' }
]
}
]
}
echart.setOption(option)
}
}
}
</script>
<style scoped>
</style>
3、折线图
代码：
<template>
<div id="main-discount" ref="discount" style="width: 90%; height: 40vh" />
</template>
<script>
export default {
name: 'PlanListDiscount',
data() {
return {}
},
computed: {},
mounted() {
this.echarts()
},
methods: {
echarts() {
const COLOR_WHITE = '#FFFFFF'
const myChart = this.$echarts.init(document.getElementById('main-discount'))
const mydate = ['0:00', '3:00', '6:00', '9:00', '12:00', '15:00', '18:00', '21:00', '24:00']
myChart.setOption({
backgroundColor: COLOR_WHITE,
title: {
textStyle: {
fontWeight: 'normal',
fontSize: 20,
color: '#919398',
fontFamily: 'Source Han Sans SC'
},
left: '5%',
top: 5
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
icon: 'rect',
itemWidth: 20,
itemHeight: 10,
orient: 'vertical',
itemGap: 13,
top: '5%',
right: 20,
textStyle: {
fontSize: 14,
color: '#919398'
}
},
grid: {
show: false,
left: '8%',
right: '8%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLine: {
show: false,
lineStyle: {
color: '#57617B'
}
},
// 坐标轴刻度相关设置
axisTick: {
show: false
},
axisLabel: {
color: '#919398',
fontSize: 14,
fontFamily: 'Source Han Sans SC'
},
data: mydate
}
],
yAxis: [
{
type: 'value',
splitNumber: 4,
offset: 30,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
color: '#919398',
fontSize: 14,
fontFamily: 'Source Han Sans SC'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed' // 虚线
}
}
}
],
series: [
{
type: 'line',
smooth: false,
symbol: 'circle',
symbolSize: 10, // 拐点大小
showSymbol: true, // 拐点是否显示
lineStyle: {
color: '#BED7FD',
normal: {
width: 2
}
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
// 折线图阴影部分的颜色，设置其透明度，去掉该属性就没有阴影部分的代码了
colorStops: [
{
offset: 0,
// eslint-disable-next-line no-undef
color: 'rgba(0, 150, 0, 0.3)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 150, 0, 0)'// 100% 处的颜色
}
],
global: false // 缺省为 false
},
shadowColor: '#BED7FD',
shadowBlur: 10
},
itemStyle: {
color: '#BED7FD' // 折线的颜色
},
data: [90, 73, 85, 65, 70, 68, 60, 59, 58]
}
]
})
}
}
}
</script>
<style lang="less" scoped>
</style>
4、柱状图
代码：
<template>
<div class="histogram-main">
<div id="main-histogram" ref="histogram" class="main-histogram" style="width: 98%; height: 30vh;margin-top: -0.3vh" />
</div>
</template>
<script>
export default {
name: 'DispatchManagementKanbanHistogram',
mounted() {
this.echarts()
},
methods: {
echarts() {
const COLOR_WHITE = '#FFFFFF'
const myChart = this.$echarts.init(document.getElementById('main-histogram'))
const mydate = ['1-1', '2-2', '3-3', '5-5', '6-6']
myChart.setOption({
backgroundColor: COLOR_WHITE,
title: {
textStyle: {
fontWeight: 'normal',
fontSize: 20,
color: '#919398',
fontFamily: 'Source Han Sans SC'
},
left: '5%',
top: 5
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
},
formatter: '{b} : {c}'
},
legend: {
show: false,
right: 0,
data: ['柱状图']
},
grid: {
show: false,
left: '8%',
right: '8%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
// 下标是否偏移
boundaryGap: true,
axisLine: {
show: false,
lineStyle: {
color: '#57617B'
}
},
// 坐标轴刻度相关设置
axisTick: {
show: true,
inside: true,
lineStyle: {
color: '#2D5BAF'
}
},
axisLabel: {
color: '#919398',
fontSize: 14,
fontFamily: 'Source Han Sans SC'
},
data: mydate
}
],
yAxis: [
{
type: 'value',
scale: true,
name: 'y轴',
min: 0,
splitNumber: 4,
axisTick: {
show: true,
lineStyle: {
color: '#919398'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#919398'
}
},
axisLabel: {
color: '#919398',
fontSize: 14,
fontFamily: 'Source Han Sans SC'
},
splitLine: {
show: true
}
}
],
series: [
{
name: '各机台生产放量',
type: 'bar',
label: { // ---图形上的文本标签
show: false,
position: 'insideTop', // ---相对位置
rotate: 0, // ---旋转角度
color: '#eee'
},
itemStyle: { // ---图形形状
color: '#6AD8AF',
barBorderRadius: [0, 0, 0, 0]
},
barWidth: '30', // ---柱形宽度
data: [29, 28, 18, 33, 17]
}
]
})
}
}
}
</script>
<style scoped>
</style>
5、柱状图和折线图集合体
代码：
<template>
<div class="discount-main-box">
<div class="discount-title">
近15日放量日计划完成情况走势图
</div>
<div id="main-trend" ref="discount" class="main-trend" style="width: 99%; height: 25vh;margin-top: -0.2vh" />
</div>
</template>
<script>
export default {
name: 'DispatchManagementKanbanDiscount',
props: {},
mounted() {
this.echarts()
},
methods: {
echarts() {
const COLOR_WHITE = '#FFFFFF'
const myChart = this.$echarts.init(document.getElementById('main-trend'))
const mydate = ['12-3', '12-4', '12-5', '12-6', '12-7', '12-8', '12-9', '12-10', '12-11', '12-12', '12-13', '12-14', '12-15', '12-16', '12-17']
myChart.setOption({
backgroundColor: COLOR_WHITE,
title: {
textStyle: {
fontWeight: 'normal',
fontSize: 20,
color: '#919398',
fontFamily: 'Source Han Sans SC'
},
left: '5%',
top: 5
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
show: true,
right: 0,
data: ['折线', '柱状图']
},
grid: {
show: false,
left: '8%',
right: '8%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
name: '(日)',
boundaryGap: true,
axisLine: {
show: false,
lineStyle: {
color: '#57617B'
}
},
// 坐标轴刻度相关设置
axisTick: {
show: true,
inside: true,
lineStyle: {
color: '#2D5'
}
},
axisLabel: {
color: '#919398',
fontSize: 14,
fontFamily: 'Source Han Sans SC'
},
data: mydate
}
],
yAxis: [
{
type: 'value',
scale: true,
name: 'y轴',
min: 0,
splitNumber: 3,
axisTick: {
show: true,
lineStyle: {
color: '#919398'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#919398'
}
},
axisLabel: {
color: '#919398',
fontSize: 14,
fontFamily: 'Source Han Sans SC'
},
splitLine: {
show: true
}
}
],
series: [
{
name: '柱状图',
type: 'bar',
label: { // ---图形上的文本标签
show: false,
position: 'insideTop', // ---相对位置
rotate: 0, // ---旋转角度
color: '#eee'
},
itemStyle: { // ---图形形状
color: '#2D5',
barBorderRadius: [0, 0, 0, 0]
},
barWidth: '20', // ---柱形宽度
data: [190, 210, 200, 170, 180, 230, 195, 220, 225, 160, 140, 195, 170, 205, 225]
},
{
name: '折线',
type: 'line',
smooth: false,
symbol: 'circle',
symbolSize: 10, // 拐点大小
showSymbol: true, // 拐点是否显示
lineStyle: {
color: '#38C0A5',
normal: {
width: 2
}
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
],
global: false // 缺省为 false
},
shadowColor: '#38C0A5',
shadowBlur: 10
},
itemStyle: {
color: '#38C0A5' // 折线的颜色
},
data: [220, 280, 210, 220, 250, 290, 240, 260, 230, 210, 240, 295, 270, 280, 275]
}
]
})
}
}
}
</script>
<style lang="less" scoped>
.discount-main-box {
.discount-title {
font-size: 3rem;
}
.main-trend {
margin-top: 3vh;
}
}
</style>
对你有帮助的话，就点个赞哦！
扫一扫
886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
