echart渲染
var chartDom = document.getElementById('echarts' + obj.id);
var myChart = echarts.init(chartDom);
//type为1初始化图表
if(obj.type == 1){
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
top: 40,
right: 60,
left: 60,
bottom: 40,
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: res.data[0].times,
},
yAxis: {
name: obj.name,
min: 'dataMin',
max: 'dataMax',
type: 'value'
},
series: [{
type: 'line',
itemStyle: {
color: '#46E3D0'
},
data: res.data[0].values,
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//更新图表
}else if(obj.type == 2){
//不建议用,但是这个项目用下面的有报错,故用这个
var realChart = myChart.getOption();
realChart.xAxis[0].data = res.data[0].times,
realChart.series[0].data = res.data[0].values,
myChart.setOption(realChart,true);
// myChart.setOption({
// xAxis: {
// data: res.data[0].times,
// },
// series: [{
// data: res.data[0].values,
// }]
// },true );
}
环形图,内部自定义文字,百分比,图标等
过程中,出现一个bug 自定义环形图颜色一直无效,后来发现,把下面代码注释就正常了
option = {
// visualMap: {///视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素。视觉元素可以是:symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色
// show: true,//是否显示 visualMap-continuous 组件。如果设置为 false,不会显示,但是数据映射的功能还存在
//}
},
流程:
monthData()
var monthChart;
function monthData() {
var chartDom = document.getElementById('monthEchart');
monthChart && monthChart.dispose();
monthChart = echarts.init(chartDom, 'walden');
var option;
var value = '50%';
option = {
graphic: [
{
type: 'image',// 类型,可以是文字、图片或其它类型
id: 'text0',
left: 'center',
top: '17%',
style: {
image:'/images/index/decrease.png',
width: 18,
height: 18,
color: '#1fb26c'
}
},
{
type: 'text',// 类型,可以是文字、图片或其它类型
id: 'text1',
left: 'center',
top: '41%',
style: {
text: '50%',
fill: '#333333', // 文字的颜色
fontSize: 22
}
},
{
type: 'text',
id: 'text2',
left: 'center',
top: '65%',
style: {
text: '环比',
fill: '#999999',
fontSize: 16
}
}
],
// color:['#e9e9e9','#1fb26c'],//(三种方法) 环形图自定义颜色,和下面的series中的color,及data中itemStyle的color 哪一个设置都可以
series: [
{
type: 'pie',
radius: ['69%', '79%'],
center: ['50%', '50%'],
// color: ['#e9e9e9', '#1fb26c'],
data: [
//itemSyle是单项的背景颜色设置。
{value: 10, itemStyle: {color: '#e9e9e9'}},
{value: 90, itemStyle: {color: '#1fb26c'}},
],
label: {
//将视觉引导图关闭
show:false,
},
// textStyle: {},
itemStyle: {
//设置的是每项之间的留白
borderWidth: 0,
borderColor: '#fff'
},
// 初始化echarts的动画效果
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
},
// 高亮样式。
// emphasis: {
// itemStyle: {
// // 高亮时点的颜色
// color: '#e9e9e9'
// },
// label: {
// show: true,
// // 高亮时标签的文字
// formatter: '高亮时显示的标签内容'
// }
// },
}
]
}
option && monthChart.setOption(option);
}
}