echats实现进度条、饼状图、折线图、柱状图、柱状图和折线图的集合体

记录工作中用到的一些echats图标

1、进度条

有两种方式：
a、通过elemnt-ui组件el-progress组件实现

上面的进度条光使用el-progress无法实现，el-progress不支持汉字，需要使用css+div进行调整
下面是实现的代码：
html:

  <div class="content-right-top"><el-progressclass="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.numfor (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, // 最小角度改为0selectedOffset: 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-undefcolor: '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>

对你有帮助的话，就点个赞哦！

echats实现进度条、饼状图、折线图、柱状图、柱状图和折线图的集合体相关推荐

Unity——两种进度条的制作
一.进度条-线状 Step1:创建Slider和Text,随便摆一下 Step2:写脚本 using System.Collections; using UnityEngine; using Unit ...
ECharts数据可视化饼状图(环形图-进度半圆形)
销售进度 (quarter) -饼状图实现步骤: 寻找官方的类似示例,给予分析,引入到HTML页面中按照需求来定制它. 链接: 环形图. 完整js代码 // 销售模块饼形图半圆形设置方式 ( ...
Echarts进度条式的柱状图
一.代码简介本次主要是在Vue web项目中,利用Echarts实现一个类似进度条似的.颜色渐变的水平柱状图二.功能预览三.示例代码 <template&g ...
Hexo博客NexT主题美化之顶部加载进度条
前言更多效果展示,请访问我的个人博客. 效果图: 教程进入博客文件夹的/themes/next文件夹下 cd /themes/next 复制代码下载安装Progress module,如下 g ...
python 基础代谢率计算_基于python实现计算且附带进度条代码实例
用python算圆周率π 1.准备第三方库pip 打开cmd 输入代码:pip install requests ,随后就会成功因为小编已经安装好了,所以就不把图截出来了 2.利用马青公式求π 3. ...
迅为i.MX6ULL 开发板开机进度条修改文档
转自:迅为IMX6ULL开发板使用手册第七十一章硬件平台:迅为i.MX6ULL 开发板本章节介绍的是iTOP-iMX6ULL-修改开机进度条的显示和修改步骤,使用的资料已经放到了开发板网盘资料中路 ...
android基础 [超级详细android常用控件解析（ScollView控件,ProgressBar进度条,PopupWindow控件）]
目录 1 章节目录 2 ScollView控件 2.1 ScrollView简介 2.2 ScrollView使用 2.3 常用属性及方法 3 ProgressBar进度条 3.1 简介 3.2 常用 ...
判断苹果黑条_Clover 引导界面分辨率完美了，但苹果进度条快加载完毕时会花屏一下。...
大家好,使用 OS X Yosemite 10.10有一段时间了,最近在折腾[size=13.63636302948px]Clover 引导界面分辨率的问题,现在Clover 引导界面分辨率完美了,但 ...
ios swift 实现饼状图进度条，swift环形进度条
ios swift 实现饼状图进度条 // // ProgressControl.swift // L02MyProgressControl // // Created by plter on 7/2 ...