Demo:
drawLine(){
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
baseOption:{
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['product', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
['洁美家初体验公众号', 41.1, 99.7, 165.1, 53.3, 103.8, 298.7 , 125 ],
['洁美家一元拼团', 86.5, 119, 243,109, 73.4, 255 , 225 ],
['好厨娘初体验公众号', 24.1, 99.5, 156.4, 288.2, 108.5 ,225 ],
['洁美家包年Q3公众号', 155.2, 267.1, 369.2, 472.4, 503.9, 139.1 ,99.2 ],
['洁美家包年Q6公众号', 100, 83, 99, 109, 250, 150 ,225 ,88],
['洁美家包年Q9公众号', 210, 309, 450, 324, 250, 150 , 109],
['洁美家包年Q10公众号', 101, 196, 293, 102, 199, 277 , 159],
['洁美家包年Q11公众号', 213, 432, 124, 543, 341, 231 , 123],
]
},
xAxis: {type: 'category'},
yAxis: {gridIndex: 0},
grid: { width:'50%', height:'80%',top: '15%',left:'50%'},
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%', '50%'],
center: ['25%', '50%'],
label: {
formatter: '{b}: {@2012} ({d}%)'
},
encode: {
itemName: 'product',
value: '10:00',//此处设置初始化时默认的Y轴起点，否则初始化渲染图表的时候，左边的饼状图会是空白
tooltip: '10:00',//此处设置初始化时默认的Y轴起点，否则初始化渲染图表的时候，左边的饼状图会是空白
}
}
]
},
media: [
]
};
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.setOption(option);
window.addEventListener("resize", () => { myChart.resize();});
}踩的坑：
原因：
