河海大学学风建设网站/网站seo检测工具

效果图

思路

柱状图：series中两个不同data数据项，第一个设置一个间距，x坐标隐藏
扇形图：series中两个相同data数据项，使用两个完全相同的扇形重合，设置不同的itemStyle：显示指示线的同时可以显示百分比的操作
字段解释会在代码中体现

源代码（vue）

html

<template><div class="contant"><div class="top"><el-date-picker class="mmmyinput"v-model="time"type="daterange"range-separator="-"value-format="yyyy-MM-dd"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></div><div class="center"><div><div class="doc-center">医院</div><div ref="pigOne"></div></div><div><div class="doc-center">会诊</div><div ref="pigTwo"></div></div><div><div class="doc-center">医生</div><div ref="pigThree"></div></div></div></div>
</template>

style中

<style lang="less" scoped>.contant{width: 98%;margin: 0 auto;font-family: Source Han Sans CN;font-weight: 400;min-height: 800px;margin-top: 20px;}.top{float:right;margin-bottom: 20px;}.center{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap; //换行div{position: relative;width: 49%;height: 345px;background: #FFFFFF;&:nth-child(2){margin-bottom: 15px;}&:nth-child(3){width: 100%;.doc-center{position: absolute;color: #FFF;/* margin: auto; */left: 37%;top: -0.1rem;width: 1.70rem;height: 0.4rem;line-height: 0.4rem;text-align: center;background: url('../../assets/slog@2x.png') no-repeat;background-position:center;z-index: 99;}}.doc-center{position: absolute;color: #FFF;/* margin: auto; */left: 26%;top: -0.1rem;width: 1.70rem;height: 0.4rem;line-height: 0.4rem;text-align: center;background: url('../../assets/slog@2x.png') no-repeat;background-position:center;z-index: 99;}}}.mmmyinput{// box-sizing: border-box;width: 300px;// height: 35px;text-align: center;margin-right: 29px;// line-height: 80px;}</style>

script中

<script>
import * as echarts from 'echarts';
export default {name:'Comprehensive',data(){return {startTime:'',endTime:'',time:[],dataOne1:200,dataOne2:600,dataOne3:800,docdata:[{value: 680, name: '医师'},{value: 340, name: '医生'},{value: 1190, name: '主治医生'},{value: 850, name: '副主任医生'},{value: 340, name: '主任医生'}],hosdata:[{value: 1048, name: '三级医院'},{value: 735, name: '二级医院'},{value: 580, name: '基层医院'}]}},computed:{startTime(){return this.time[0]},endTime(){return this.time[1]}},watch:{time:{handler(newName, oldName) {},},},mounted(){this.draw()},methods:{draw () {this.Histogram()this.chartPie1()this.chartPie2() },}
}
</script>

单个图代码太长、一个一个显示
位置methods下
柱状图

Histogram(){ // 柱状图// 用echarts来画图// 1. 初始化echarts对象。//  格式： const echartobj = echarts.init(dom结构)// 2. 通过固定格式的option来画图//    echartobj.setOption(option)// 基于准备好的dom，初始化echarts实例this.$refs.pigTwo.style.width="494px"this.$refs.pigTwo.style.hight="200px"var myChart = echarts.init(this.$refs.pigTwo);// 指定图表的配置项和数据let option = {title:[ //标题{text: `会诊量`,bottom:'3%', // 位置left:"35%",textStyle:{fontSize: "12px"}},{text: `${this.dataOne1+this.dataOne2}`,bottom:'3%',left:"45%",textStyle:{fontSize: "12px",color:'#007AFF'}},{text: `次`,bottom:'3%',left:"52%",textStyle:{fontSize: "12px"}},],legend: {  // 图例组件 标记show: true,right:"15%",top:"10%",orient:'vertical',data: [{ name: '远程会诊',icon: 'circle',textStyle: { fontSize: "10px"}, }, { name: '双向转诊',icon: 'circle',textStyle: { fontSize: "10px"}, } ] },grid:{ // 柱状图设置位置top:'35%',bottom:'15%',},xAxis: [ // x轴{type: 'category',show: false,}],yAxis: [{type: 'value',min:'0',// max:'1200'}],tooltip: { // 鼠标移动显示trigger: 'item'},series: [{name: '远程会诊',type: 'bar',data:[{value:this.dataOne1,name:'远程会诊'},],barWidth: '15%',  // 柱形的宽度barGap:'155%', // 调整间距itemStyle: {normal: {label: {color: '#000000',show: true,position: 'top', },}},},{name: '双向转诊',type: 'bar',data:[{value:this.dataOne2,name:'双向会诊'}],barWidth: '15%',  // 柱形的宽度itemStyle: {normal: {label: {color: '#000000',show: true,position: 'top', },}},}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);},

饼状图

chartPie1(){ // 饼状图this.$refs.pigOne.style.width="494px"this.$refs.pigOne.style.hight="200px"var myChart = echarts.init(this.$refs.pigOne);// 指定图表的配置项和数据let option = {title:[ // 标题显示{text: `医院`,bottom:'3%', // 显示位置left:"37%",textStyle:{fontSize: "12px"}},{text: `${this.dataOne1+this.dataOne2}`,bottom:'3%',left:"45%",textStyle:{fontSize: "12px",color:'#007AFF'}},{text: `家`,bottom:'3%',left:"54%",textStyle:{fontSize: "12px"}},],tooltip: { // 鼠标移动显示trigger: 'item'},legend: { // 图例标记样式显示tooltip: { trigger: 'axis' },show: true,right:"5%",top:"10%",orient:'vertical', // 垂直显示data: [{ name: '三级医院',icon: 'circle',textStyle: { fontSize: "10px"}, }, { name: '二级医院',icon: 'circle',textStyle: { fontSize: "10px"}, },{ name: '基层医院',icon: 'circle',textStyle: { fontSize: "10px"}, }] },series: [{name: '医院个数',type: 'pie',   //饼状图radius: '50%',   //大小minAngle:'15', // 扇形的最小角度center: ['50%', '50%'],    //显示位置data: this.hosdata,   //数据,我们ajax获取roseType: 'radius',itemStyle: {normal: {label: {        //此处为指示线文字fontStyle: "normal",formatter:'{c}',},labelLine: {    //指示线状态show: true,smooth: 0.2,length: 10,length2: 20}}},},// 下面在加一个相同数据的样式图，作用调整不同的itemStyle{name: '',type: 'pie',radius: '50%',center: ['50%', '50%'],data:this.hosdata,roseType: 'radius',itemStyle: {normal: {label: {        //此处为指示线文字show: true,position: 'inner', //标签的位置textStyle: {fontWeight: 200,fontSize: 10    //文字的字体大小},formatter:'{d}%',},labelLine: {    //指示线状态show: true,smooth: 0.2,length: 10,length2: 20}}},}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);},

饼状图二

    chartPie2(){ // 饼状图this.$refs.pigThree.style.width="100%"this.$refs.pigThree.style.hight="180px"var myChart = echarts.init(this.$refs.pigThree);// 指定图表的配置项和数据let option = {title:[{text: `专家数量`,bottom:'3%',left:"45%",textStyle:{fontSize: "12px"}},{text: `${this.dataOne1+this.dataOne2}`,bottom:'3%',left:"52%",textStyle:{fontSize: "12px",color:'#007AFF'}},{text: `人`,bottom:'3%',left:"56%",textStyle:{fontSize: "12px"}},],tooltip: {trigger: 'item'},legend: {tooltip: { trigger: 'axis' },show: true,right:"5%",top:"10%",orient:'vertical',data: [{ name: '主治医生',icon: 'circle',textStyle: { fontSize: "10px"}, }, { name: '主任医生',icon: 'circle',textStyle: { fontSize: "10px"}, },{ name: '副主任医生',icon: 'circle',textStyle: { fontSize: "10px"}, },{ name: '医生',icon: 'circle',textStyle: { fontSize: "10px"}, },{ name: '医师',icon: 'circle',textStyle: { fontSize: "10px"}, },] },series: [{name: '医院个数',type: 'pie',   //饼状图minAngle:'15', // 扇形的最小角度radius: '60%',   //大小center: ['50%', '50%'],    //显示位置data: this.docdata,   //数据,我们ajax获取// roseType: 'radius',itemStyle: {borderRadius: 10,borderWidth: 2,borderColor: '#fff',normal: {label: {        //此处为指示线文字fontStyle: "normal",formatter:'{c}',},labelLine: {    //指示线状态show: true,smooth: 0.2,length: 10,length2: 20}}},emphasis:{itemStyle: {borderWidth: 3,borderType: "solid",shadowBlur: 1.5,shadowOffsetX: 1.5,opacity: 0.76,shadowColor: "rgba(244, 240, 240, 1)",borderColor: "rgba(248, 244, 244, 1)"}}},{name: '',type: 'pie',radius: '60%',minAngle:'15', // 扇形的最小角度center: ['50%', '50%'],data:this.docdata,// roseType: 'radius',itemStyle: {borderRadius: 10,borderWidth: 2,borderColor: '#fff',normal: {label: {        //此处为指示线文字show: true,position: 'inner', //标签的位置textStyle: {fontWeight: 200,fontSize: 10    //文字的字体大小},formatter:'{d}%',},labelLine: {    //指示线状态show: true,smooth: 0.2,length: 10,length2: 20}}},emphasis:{itemStyle: {borderWidth: 3,borderType: "solid",shadowBlur: 1.5,shadowOffsetX: 1.5,opacity: 0.76,shadowColor: "rgba(244, 240, 240, 1)",borderColor: "rgba(248, 244, 244, 1)"}}}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}

实例二

<div class="center"><div ref="container" style="height: 100%"></div></div><div class="center"><div ref="kcNums" style="height: 100%"></div></div>

• 数据格式

chartData:[{count:"0",date:"2021-04-19"},{count:"3",date:"2021-04-20"},{count:"0",date:"2021-04-21"},{count:"6",date:"2021-04-22"}// 等等····
]
kcdata:[{name:"焦虑",value:2},{name:"厌学",value:3},{name:"注意力不集中",value:3},{name:"失眠",value:0},{name:"早恋",value:0}
]

• 渲染准备

    myChart () {this.$refs.container.style.width = '100%'this.$refs.container.style.hight = '400px'var myChart = echarts.init(this.$refs.container)var dateList = this.chartData.map(function (item) {// return item.date.slice(5)return item.date})var valueList = this.chartData.map(function (item) {return item.count})const option = {// Make gradient line herevisualMap: [{show: false,type: 'continuous',seriesIndex: 0,min: 0,max: 400}, {show: false,type: 'continuous',seriesIndex: 1,dimension: 0,min: 0,max: dateList.length - 1}],tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},xAxis: [{axisLabel: {// interval: 3 // 处理x轴间隔},// type: 'category',// boundaryGap: false,data: dateList},{type: 'category',// boundaryGap: false,data: dateList,gridIndex: '1'}],yAxis: [{}, {gridIndex: '1'}],grid: [{top: '16%',left: '15%'}, {top: '16%',left: '15%'}],// grid: {//   top: '35%',//   bottom: '15%'// },// tooltip: {//   trigger: 'item'// },series: [// {//   type: 'line',//   showSymbol: false,//   data: valueList// },{name:'回复条数',type: 'line',showSymbol: true,data: valueList,xAxisIndex: 1,yAxisIndex: 1// markLine: {//   data: [//     { type: 'average', name: '平均值' },//     {//       symbol: 'circle',//       label: {//         position: 'start'//       },//       type: 'max',//       name: '最高点'//     }//   ]// }}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option)},chartPie2(){ // 饼状图this.$refs.kcNums.style.width="100%"this.$refs.kcNums.style.hight="400px"var myChart1 = echarts.init(this.$refs.kcNums);// 指定图表的配置项和数据this.kcdata = this.kcdata.map(item=>{return {name: item.name,value:item.total}})let data = this.kcdata.map(item=>{return {name: item.name,// value:item.total,// icon: 'circle',textStyle: { fontSize: "14px"}}})let option = {tooltip: {trigger: 'item'},legend: {tooltip: { trigger: 'axis' },show: true,left:"5%",bottom:"10%",orient:'vertical',data: data},series: [{name: '课程数统计',type: 'pie',   //饼状图radius: ['40%', '70%'],minAngle:'15', // 扇形的最小角度// radius: '60%',   //大小center: ['50%', '50%'],    //显示位置data: this.kcdata,   //数据,我们ajax获取roseType: 'radius',itemStyle: {borderRadius: 10,borderWidth: 2,borderColor: '#fff',normal: {label: {        //此处为指示线文字show: false,fontStyle: "normal",formatter:'{c}',},labelLine: {    //指示线状态show: false,smooth: 0.2,length: 10,length2: 20}}},emphasis:{itemStyle: {borderWidth: 3,borderType: "solid",shadowBlur: 1.5,shadowOffsetX: 1.5,opacity: 0.76,shadowColor: "rgba(244, 240, 240, 1)",borderColor: "rgba(248, 244, 244, 1)"}}},{name: '课程数统计',type: 'pie',// radius: '60%',radius: ['40%', '70%'],minAngle:'15', // 扇形的最小角度center: ['50%', '50%'],data:this.kcdata,// roseType: 'radius',itemStyle: {borderRadius: 10,borderWidth: 2,borderColor: '#fff',normal: {label: {        //此处为指示线文字show: false,position: 'inner', //标签的位置textStyle: {fontWeight: 200,fontSize: 10    //文字的字体大小},formatter:'{d}%',},labelLine: {    //指示线状态show: false,smooth: 0.2,length: 10,length2: 20}}},emphasis:{itemStyle: {borderWidth: 3,borderType: "solid",shadowBlur: 1.5,shadowOffsetX: 1.5,opacity: 0.76,shadowColor: "rgba(244, 240, 240, 1)",borderColor: "rgba(248, 244, 244, 1)"}}}]}// 使用刚指定的配置项和数据显示图表。myChart1.setOption(option);}}
}
</script>