跑腿网站开发,wordpress英文,平面图网站,溧阳城乡建设厅网站文章目录 一、效果图二、步骤1.安装插件2.引入2.主要代码2.素材图片 总结 一、效果图 二、步骤
1.安装插件
npm install echarts
npm install echarts-liquidfillecharts5的版本与echarts-liquidfill3兼容#xff0c;echarts4的版本与echarts-liquidfill2兼容,安装的时候需要… 文章目录 一、效果图二、步骤1.安装插件2.引入2.主要代码2.素材图片 总结 一、效果图 二、步骤
1.安装插件
npm install echarts
npm install echarts-liquidfillecharts5的版本与echarts-liquidfill3兼容echarts4的版本与echarts-liquidfill2兼容,安装的时候需要注意
2.引入
import * as echarts from echarts;
import echarts-liquidfill2.主要代码
代码如下示例
templatediv classcontainerClassdiv classcenterPie/divdiv classboxChartdiv classboxChart-textdivspan classspan1{{mbwcl}}/spanspan classspan1 stylefont-size: 30px%/span/divdivspan classspan2目标完成率/span/div/divdiv stylewidth: 100%;height: 100% refmyChart/div/div/div
/template
script
import * as echarts from echarts
import echarts-liquidfill
export default {name: part_center,data(){return{myChart:null,//水球图数据mbwcl:23.14,}},mounted() {if (this.myChart) {this.myChart.dispose()}setTimeout(() {this.$nextTick((){this.drawChart(this.mbwcl)})},100)},methods:{drawChart(val){this.myChart echarts.init(this.$refs.myChart)let value val / 100let option {series: [{type: liquidFill,radius: 85%,center: [50%, 50%],color: [{type: linear,x: 0,y: 1,x2: 0,y2: 0,colorStops: [{offset: 1,color: [rgba(2,144,255,0.4)], // 0% 处的颜色},{offset: 0,color: [rgba(45,175,230,0.8)], // 100% 处的颜色},],global: false, // 缺省为 false},],data: [value, value, value], // data个数代表波浪数amplitude: 15,// 图形样式itemStyle: {opacity: 1, // 波浪的透明度shadowBlur: 0, // 波浪的阴影范围},backgroundStyle: {borderWidth: 2,borderColor: transparent,color: transparent,},label: {show: false,textStyle: {color: #5594fa,insideColor: #12786f,fontSize: 40,},formatter: (params) {return ${(params.value * 100).toFixed(2)}%;},},outline: {show: false,},},],}this.myChart.setOption(option)},}
}
/script
style scoped langless
.containerClass{position: absolute;width: 100%;height: 100%;top: 0px;left: 0px;background: #061530;.centerPie{position: absolute;top: 18px;left: calc((100% - 358px) / 2);width: 358px;height: 356px;background: url(../img/组54820.png);background-size: 100% 100%;}.boxChart{position: absolute;top: 47px;left: calc((100% - 300px) / 2);width: 300px;height: 300px;//background: transparent;.boxChart-text{position: absolute;width: 300px;height: 300px;display: flex;flex-direction: column;justify-content: center;z-index: 20;text-align: center;.span1{font-size: 48px;font-family: DingTalk-JinBuTi;font-weight: bold;background-image: linear-gradient(to bottom, #fff, #7dd1ff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.span2{font-size: 22px;color: #fff;}}}
}
/style2.素材图片 总结
这个仅仅只是简单的一个例子如果要完成更复杂的功能可以在echarts社区里面找网址在我前面分享的前端网站那个文章里面。
