记录工作中用到的一些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>
对你有帮助的话，就点个赞哦！
