vue echarts 画饼图

页面：

    {{--饼图--}}<template>
{{--    <div class="col-md-12">--}}
{{--      <div id="mychart4" class="col-md-4" style="height: 400px">--}}
{{--      </div>--}}
{{--    </div>--}}<el-col :span="8"><div id="mychart4" :style="{width: '100%', height: '400px'}"></div></el-col></template>

  pie_data: [],  //饼图myChart: {},pieName: [],/** 再画个饼给秃吃**/drawPieChart(){var that = this;var pie_title =  "制板未达成原因";let select_type = that.selectType;if (select_type == 2){pie_title =  "样品未达成原因";}for (let i = 0; i < that.pie_data.length; i++) {that.pieName[i] = that.pie_data[i].name;}var option;option = {// xAxis: {// },// yAxis: {// },legend: {// 图例data: that.pieName2,right: "10%",top: "10%",orient: "vertical"},title: {// 设置饼图标题，位置设为顶部居中text: pie_title,//子标题subtext: sub_title,top: "0%",left: "center",//子标题字体大小subtextStyle:{fontSize: 16,fontWeight: 500,color: '#000'},//鼠标移入显示tooltip: {trigger: 'item',formatter: '{a} : 
 {b} : {c} 
百分比 : {d}%' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比},},series: [{name: sub_title, //{a}（系列名称）type: "pie",data: that.pie_data,label: {show: true,//color: 'inherit', //label与饼图区域颜色 一致//formatter: "{b}：{c} ({d}%)" ,// b名称，c对应值，d百分比//formatter: "{b}：\n{c} ({d}%)" , //加回车//formatter: '{d}%' ,//只要百分比//设置label的字体大小"normal": {"show": true,//"position":'inner', //标签的位置//label的字体"textStyle": {"fontSize": 12,"fontWeight" : 200,//"color": "#000"  //指定颜色"color": 'inherit', //label与饼图区域颜色 一致},//formatter: "{b}：{c} ({d}%)" ,// b名称，c对应值，d百分比//formatter:"{b}：{d}%" ,//formatter: "{b}：\n{c} ({d}%)" ,//设置label的颜色//formatter: function (params) {// return params.value; return params.seriesName + ' \n ' + params.value;//},formatter: "{b}: {a|{d}%}",rich: {a: {color: "#17b3e9",},},},},itemStyle: {//这里是更添加阴影emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'},//这里是更改饼图颜色normal:{color:function(params) {var colorList = ['#2F4554','#C23531'];return colorList[params.dataIndex]}}},radius: "50%", //饼图半径}]};var chartDom = document.getElementById('mychart2');var myChart = echarts.init(chartDom);option && myChart.setOption(option);//初始化echarts//var myChart = echarts.init(document.getElementById('main'));//var myChartA = echarts.init(document.getElementById('mainA'));//var myChartB = echarts.init(document.getElementById('mainB'));//加载echarts配置项//myChart.setOption(option);//myChartA.setOption(option);//myChartB.setOption(option);//随着屏幕大小调节图表 自适应//方法一：// window.addEventListener("resize",function (){//   myChart.resize();//   myChartA.resize();//   myChartB.resize();// });////方法二：// window.onresize = function(){//   myChart.resize();//   myChartA.resize();//   myChartB.resize();// }},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！