Home > Developer > JavaScript
The table and echart are linked at the second level, and the echart is highlighted by clicking the echart highlight icon cell.
Html section
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
<Style>
. Bgc {
Background: #08a9f2;
}
Tr, td {
Cursor: default;
}
. Lh {
Background: red;
Color: # fff;
}
</Style>
</Head>
<Body>
<Table width = 100% border = "1px" cellspacing = "0px">
<Thead>
<Th> name </th>
<Th chartType = bar> temperature (bar) </th>
<Th chartType = bar> height (bar) </th>
<Th chartType = line> sales (line) </th>
<Th chartType = bar> bar </th>
<Th chartType = line> revenue </th>
</Thead>
<Tbody>
<Tr>
<Td> August 1, January </td>
<Td> 234 </td>
<Td> 345 </td>
<Td> 123 </td>
<Td> 234 </td>
<Td> 444 </td>
</Tr>
<Tr>
<Td> August 1, February </td>
<Td> 123 </td>
<Td> 234 </td>
<Td> 345 </td>
<Td> 347 </td>
<Td> 285 </td>
</Tr>
<Tr>
<Td> August 1, March </td>
<Td> 345 </td>
<Td> 654 </td>
<Td> 234 </td>
<Td> 654 </td>
<Td> 523 </td>
</Tr>
<Tr>
<Td> August 1, April </td>
<Td> 864 </td>
<Td> 234 </td>
<Td> 647 </td>
<Td> 347 </td>
<Td> 237 </td>
</Tr>
<Tr>
<Td> August 1, May </td>
<Td> 435 </td>
<Td> 737 </td>
<Td> 348 </td>
<Td> 964 </td>
<Td> 285 </td>
</Tr>
</Tbody>
</Table>
<! -- Prepare a DOM with the size (width and height) for ECharts -->
<Div id = "main1"> <! -- Introduce Jq -->
<Script src = "lib/jQuery/jquery-3.1.1.min.js"> </script>
<! -- Introduce echarts -->
<Script src = "echarts. min. js"> </script>
<Script>
// Locate the tr in the tbody and traverse it
$ ('Tbody tr'). each (function (){
// Click the current tr
$ (This). click (function (){
// The current line is highlighted, and the highlighting of other sibling elements is removed.
$ (This). addClass ('bgc '). siblings (). removeClass ('bgc ');
// Remove the child element of the same level element of the current row to highlight (cell)
$ (This). siblings (). children (). removeClass ('lh ');
// Create four arrays and dynamically add them to the echart
Var data1 = [], title1 = [], chartType = [], namedata = [];
// Get td and th
Var td = $ (this). find ("td"), th = $ ('th ');
// Traverse th
Td. each (function (I ){
// Do not add the first 0 index.
If (I! = 0)
Data1.push(((this).html ());
Else
Title1.push(%(this%.html ());
})
// Same as above
Th. each (function (I ){
If (I! = 0)
Namedata.push(((this).html ());
ChartType. push ($ (this). attr ("chartType "));
})
// Obtain the graph dynamically based on the above parameters
Var myChart = echarts. init (document. getElementById ('main1 '));
Var option = {
XAxis :{
Data: namedata,
// AxisTick: false // The downward line of the X axis
},
YAxis :{
Name: 'maximum time ',
},
Series :[
{
Name: title1 + 'bar fig ',
Type: 'bar ',
BarWidth: '000000', // column width
ItemStyle :{
Normal: {color: '#08a9f2',} // column color
},
Data: data1,
MarkPoint :{
Clickable: true,
Data :[
{Type: 'max ', name: 'max '},
{Type: 'Min', name: 'Min '}
]
}
},
{
Name: title1 + 'line my ',
Type: 'line ',
ItemStyle :{
Normal: {color: '#72b201'} // line color
},
Data: data1
}
]
}
MyChart. setOption (option );
MyChart. on ('click', function (params ){
// Click the markPoint
If (params. componentType = 'markpoint ')
Return false;
// Highlight the current click through the index
$ (Td). eq (namedata. indexOf (params. name) + 1). addClass ('lh '). siblings (). removeClass ('lh ');
// Highlight the current click by querying
/*
*
*
*
$ (Td). each (function (I ){
If (params. data ==$ (this). text ())
$ (This). addClass ('lh ')
Else
$ (This). removeClass ('lh ')
})
*
*
*
*/
});
})
})
</Script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
