Published
Edited
Dec 16, 2019
3 stars
div = html`<div id="main" style="width: 954px;height:500px;"></div>`
table.style.display ='none'
myChart = echarts.init(document.getElementById('main'));
Init = {
const option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['causal_glosa', '2019-Enero', '2019-Febrero', '2019-Marzo', '2019-Junio', '2019-Julio', '2019-Agosto'],
['FACTURACIÓN', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['TARIFAS', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['SOPORTES', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
['AUTORIZACIÓN', 24.8, 57.2, 39.5, 46.4, 85.2, 92.5],
['COBERTURA', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1],
['PERTINENCIA', 45.2, 37.1, 69.2, 52.4, 33.9, 49.1],
['DEVOLUCIONES', 45.2, 37.1, 69.2, 52.4, 33.9, 49.1],
['RESPUESTAS A GLOSAS/DEVOLUCIONES', 45.2, 37.1, 69.2, 52.4, 33.9, 49.1],
]
},
xAxis: {type: 'category'},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '30%'],
label: {
formatter: '{b}: {@2019-Agosto} ({d}%)'
},
encode: {
itemName: 'causal_glosa',
value: '2019-Agosto',
tooltip: '2019-Agosto'
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.on('click', function (params) {
if(params.seriesId === "pie")
{
console.log(params.name, params.dimensionNames[params.encode.value])
table.style.display ='block'
}
});
myChart.setOption(option);
return true;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
