首页 帮助中心 基调听云大屏 ECharts

Echarts图表

组件名称:Echarts图表

组件样式

Echarts图表

组件说明

Echarts图表,是通过直接调用javascript eval方法,执行编辑器内字符串,生成图表。

注意事项

  1. 请按照官方API编写图表配置项。

  2. 动态更新图表需要使用this.myChart对象更新。

  3. 编辑器供了全局jquery,$,echarts对象。

  4. 如果图表不能正常渲染,请检查控制台是否报错。

请求方式:POST

https://report.tingyun.com/Echarts

示例

//根据echarts官方API 配置option属性,注意图标配置项必须命名option,否则不能正常渲染。
var option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            
            type : 'shadow'        
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            data:[10, 52, 200, 334, 390, 330, 220]
        }
    ]
};

//demo 动态更新图表;
//必须通过 this.myChart 动态更新图表;
//编辑器提供了全局jquery,$,echarts对象。
this.demointer = setInterval(function () {
	var data = this.myChart.getOption().series[0].data;
	for (var i = 0; i < 5; i++) {
		data.shift();
		data.push(Math.floor(Math.random()*100));
	}
	this.myChart.setOption({series: [{data: data}]});
}.bind(this), 3000);