vue使用echarts制作圆环图,代码如下所示:
<div id="main"></div> <script type="text/ecmascript-6"> export default { //从父组件中接收到的数据 props:{ chartT:{ type:Object, required:true } }, data () { return { charts: '', totalIncome:'', opinionData: [ {value: Math.abs(this.chartT.imp_rate)},//取绝对值 {value: 100} ] } }, methods: { drawPie (id) { this.charts = this.$echarts.init(document.getElementById(id)); this.charts.setOption({ tooltip: { trigger: 'item', formatter: '{a}<br/>{b}:{c} ({d}%)' }, legend: { orient: 'vertical', x: 'left', data: this.opinion }, color:['#2872ef','#d6d6d6','#fc6e51'], series: [ { name: '访问来源', type: 'pie', radius: ['90%', '65%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, testStyle: { fontSize: '30', fontWeight: 'bold' } } }, //根据数值判断颜色 // itemStyle:{ // normal:{ // color:function(params){ // console.log(params) // console.log(params.dataIndex) // console.log(params.data.value) // console.log(params.value) // if(params.value > 0){ // return "#2872ef"; // }else if(params.value[0] < 0 ){ // return "#fc6e51"; // } // return "#d6d6d6"; // } // } // }, labelLine: { normal: { show: false } }, data: this.opinionData } ] }) } }, mounted () { this.$nextTick(function () { this.drawPie('main') }) }, } </script>
父组件传值给子组件
<template> <div class="index-wrapper"> <tittle :chartT="chart_tit"></tittle> </div> </template> <script type="text/ecmascript-6"> import axios from 'axios' import Tittle from './applicationDetail/appTittle' export default { data(){ return{ chart_tit:{} } } } </script>
总结
以上所述是小编给大家介绍的vue中使用echarts制作圆环图的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
您可能感兴趣的文章:
- Echarts基本用法_动力节点Java学院整理
- React 使用recharts实现散点地图的示例代码
- django+echart绘制曲线图的方法示例
- vue-cli项目中使用echarts图表实例
- vue使用echarts图表的详细方法
- 详解vue文件中使用echarts.js的两种方式
- echarts实现地图定时切换散点与多图表级联联动详解
- echarts设置图例颜色和地图底色的方法实例
- 微信小程序中使用ECharts 异步加载数据实现图表功能
- Java调用echarts提供的地图压缩方法来压缩地图