141 lines
4.7 KiB
JavaScript
141 lines
4.7 KiB
JavaScript
// components/bar-chart/index.js
|
|
import * as echarts from '../../../ec-canvas/echarts'
|
|
|
|
Component({
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {
|
|
chartId:{
|
|
type: String
|
|
},
|
|
chartData:{
|
|
type: Object
|
|
}
|
|
},
|
|
observers: {
|
|
chartData: function (val) {
|
|
//console.log(val)
|
|
this.initChart()
|
|
},
|
|
},
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
ec: {
|
|
lazyLoad: true
|
|
},
|
|
chart:undefined,
|
|
},
|
|
lifetimes: {
|
|
created: function(){
|
|
//在组件实例刚刚被创建时执行，注意此时不能调用 setData
|
|
},
|
|
attached: function () {
|
|
//在组件实例进入页面节点树时执行
|
|
|
|
},
|
|
ready: function () {
|
|
// 在组件在视图层布局完成后执行
|
|
|
|
this.initChart();
|
|
},
|
|
detached: function () {
|
|
// 在组件实例被从页面节点树移除时执行
|
|
},
|
|
|
|
},
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
initChart(){
|
|
var id ='#' + this.data.chartId;
|
|
this.component = this.selectComponent(id);
|
|
this.component.init((canvas, width, height, dpr) => {
|
|
let chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr
|
|
})
|
|
chart.setOption(this.getData());
|
|
return chart;
|
|
})
|
|
},
|
|
getData() {
|
|
var data = this.data.chartData
|
|
var option = {
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["65%", "80%"],
|
|
label: {
|
|
normal: {
|
|
position: "center",
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: data.value,
|
|
label: {
|
|
normal: {
|
|
formatter: "{d} %",
|
|
textStyle: {
|
|
fontSize: 20,
|
|
color: "#00ecfe",
|
|
fontWeight:'bold',
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: {
|
|
// 完成的圆环的颜色
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: "#00cefc", // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#367bec", // 100% 处的颜色
|
|
},
|
|
],
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: (100-data.value),
|
|
label: {
|
|
normal: {
|
|
formatter: "\n\n\n\n"+data.text,
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#273259",
|
|
}
|
|
},
|
|
hoverAnimation: false,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
return option;
|
|
}
|
|
}
|
|
})
|