echarts
如果在开发中要引用echarts插件，首先需要在config.json中的plugins中增加配置， 其次要在main.js或用户自己的创建的其他js文件中，引用该插件。
示例：
下面展示的是echarts官方网站上提供的一个示例。
{
"develop":{
"html":"index.html",
"css":[],
"entry":"main.js",
"scripts":{
}
},
"plugins":["echarts"],
"libs":[],
"services":[],
"customAttributes":{
"pro":[],
"con":[]
}
}
这里我们需要在plugins中引入echarts,本示例不展示属性栏和连接数据源情况下的配置，所以就配置这一项。
<body>
<div id="_#visroot#_" class="_#customWidget#_">
<div id="_#visroot#_main" ></div>
</div>
</body>
html代码中，我们只需要body中的内容，并且创建了一个id命名为_#visroot#_main的div。这个将作为echarts的入口。
(function(options){
var echarts=window.plugins.echarts;
return {
$data:{
properties_:null,
chart:null,
option:null,
},
$methods:{
init(){
$('#_#visroot#_main').css('height',this.properties_.style.height);
$('#_#visroot#_main').css('width',this.properties_.style.width);
this.chart = echarts.init(document.getElementById('_#visroot#_main'));
this.option = {
backgroundColor: 'rgba(0,0,0,0)',
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item'
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 274, name: '联盟广告'},
{value: 235, name: '视频广告'},
{value: 400, name: '搜索引擎'}
].sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
color: 'rgba(255, 255, 255, 0.3)'
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
this.chart.setOption(this.option);
}
},
$hooks:{
onInit(properties_){
this.properties_=properties_;
this.init();
},
onDestroy(){
},
setData(data,datasourceInfo){
if(this.chart&&data&&datasourceInfo&&data.data){
}
},
outSizeCallBack(info){
if(this.properties_){
$('#_#visroot#_main').css('height',this.properties_.style.height);
$('#_#visroot#_main').css('width',this.properties_.style.width);
}
}
}
}
})
在外层函数头部我们声明了echarts。
var echarts=window.plugins.echarts;
在$method中的init方法中，首先设置了echarts入口div的宽高。这里不设置的话，div高度是0，echarts无法正常显示。 其次进行echarts的初始化。