In an HTML table, you can insert a Echarts chart as long as the grid that needs to insert the Echarts chart is set to a clear width (not as a percentage), and an ID is given.
As shown in the example:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Echarts</title> <!--introduction of Echarts.js - <Scripttype= "Text/javascript"src= "Http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></Script></Head><Body> <!--prepare a DOM with size (wide height) for echarts - <TableBorder= "1"> <TR> <th>Header 1</th> <th>Header 2</th> </TR> <TR> <TDstyle= "weight:300px; height:200px">Row 1, col 1</TD> <TDID= "Mainbar", Style= "weight:400px; height:200px">Row 1, Col 2</TD> </TR> <TR> <TDstyle= "weight:300px; height:200px">Row 2, col 1</TD> <TDID= "MainLine", Style= "weight:400px; height:200px">Row 2, Col 2</TD> </TR> </Table> <Scripttype= "Text/javascript"> //Initializes a Echarts instance based on the prepared Dom varMyChart=Echarts.init (document.getElementById ('Mainbar')); varoption={xaxis: {data: ["Shirts","Sweater","Chiffon Sweater","Trousers","High Heels","Socks"]}, YAxis: {}, Series: [{name:'Sales', type:'Bar', data: [5, -, $, Ten, Ten, -] }] }; //displays the chart using the configuration item and data you just specified. mychart.setoption (option); </Script> <Scripttype= "Text/javascript"> //Initializes a Echarts instance based on the prepared Dom varMyChart=Echarts.init (document.getElementById ('MainLine')); varoption={xaxis: {data: [],}, YAxis: {}, Series: [{name:'Sales', type:' Line', data: [5, -, $, Ten, Ten, -] }] }; //displays the chart using the configuration item and data you just specified. mychart.setoption (option); </Script> </Body></HTML>
HTML add echarts chart to table