industryTypeChart: function () {
let that = this;
var chartDom = document.getElementsByClassName('bottom-right-industry')[0];
var myChart = echarts.init(chartDom);
let option;
option = {
// 背景色
// backgroundColor: '#093036',
// title样式
// title: {
// text: '玫瑰图',
// left: 'center',
// top: 20,
// textStyle: {
// color: '#ccc'
// }
// },
// hover详情效果（文字的样式也是可以自定义的（官方文档直接搜tool））
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
// 图例
legend: {
// 图例组件离容器上下左右的距离：https://echarts.apache.org/zh/option.html#legend.left
left: 'auto' ,
top: 'auto' ,
right: 'auto' ,
bottom: 5,
// 图例列表的布局朝向
orient: 'horizontal',
// 字体
textStyle: {
color: "#fff",
fontSize: 16
},
// 图例宽高 一般别设置，内部会自动处理的比较完美
// itemHeight: 24,
// itemWidth: 50
},
series: [{
type: 'pie',
// 内环的大小 以及饼图大小
radius: [30, 120],
// 中心在容器的哪个位置
center: ['50%', '50%'],
// 颜色
color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5',"#F3972F"], //'#FBFE27','rgb(11,228,96)','#FE5050'
// 数据结构
data: [{
value: 285,
name: '10年以下楼龄'
},
{
value: 410,
name: '10-20年以下楼龄'
},
{
value: 274,
name: '20-30年以下楼龄'
},
{
value: 235,
name: '30年以上楼龄'
},
{
value: 232,
name: '危房'
}
].sort(function(a, b) {
// sort是排序数组的排序方法
return a.value - b.value
}),
roseType: 'radius',
// 伸出的详细指示说明：文字
label: {
normal: {
formatter: ['{c|{c}户}', '{b|{b}}'].join('\n'),
rich: {
c: {
color: '#8DEF8B',
fontSize: 20,
fontWeight:'bold',
lineHeight: 5
},
b: {
color: 'rgb(98,137,169)',
fontSize: 15,
height: 40
},
},
}
},
// 伸出的详细指示说明：线
labelLine: {
normal: {
lineStyle: {
color: 'rgb(98,137,169)',
},
smooth: 0.2,
length: 1,
}
},
// 每一个扇形样式
itemStyle: {
normal: {
shadowColor: 'rgba(0, 0, 0, 0.8)',
shadowBlur: 50,
}
}
}]
};
option && myChart.setOption(option);
// setTimeout(function () {
// that.enterpriseTypeChart = echarts.init(document.querySelector(
// '.education_alumni_type_chart'));
// that.enterpriseTypeChart.setOption(option);
// }, 10)
},
