Recently, it's too troublesome to use js to make charts. So I find some open source libraries to use. I find echarts are very good.
The document of echarts makes everything clear. Download zip package directly. If you want to use it offline, just refer to the dist folder in the download package.
First, put the downloaded package in the project folder, and use. / to reference it here
Refer directly to the configuration:
<script type="text/JavaScript" src="./echarts-2.2.0/dist/echarts-all.js"> </script>
<script type="text/javascript" src="./echarts-2.2.0/dist/echarts.js"> </script>
require.config({
paths: {
//echarts: 'http://echarts.baidu.com/build/dist'
echarts:'./echarts-2.2.0/dist/'
}
});
// Use
require(
[
'echarts',
'echarts/chart/bar' // bar module is loaded with histogram and loaded on demand
],
The annotated ones are echarts from Baidu online, and the following ones are offline. I put all the files in the path of D: Download echarts-2.1.10 build source under the echarts folder of my project and they can be used normally.
Attributes can be set according to the requirements of the chart
var option = {
backgroundColor:'#888888', // Set the background color of the chart
title : {
text: 'Maximum version coverage',
textStyle:
{
color: '#888888',
},
},
tooltip: {
show: true
},
/*
legend: {
data:['Coverage]
},
*/
xAxis : [
{
type : 'category',
name : 'Version name',
data : versionnames,
axisLine :
{ // axis
show: true,
lineStyle: {
color: 'white',
//type: 'solid',
width: 2}
}
}
],
yAxis : [
{
type : 'value',
name : 'Coverage rate(%)',
min : 0,
max : 100,
axisLine :
{ // axis
show: true,
lineStyle: {
color: 'white',
//type: 'solid',
width: 2}
}
}
],
series : [
{
name : 'Coverage rate',
type: 'bar',
data : coverages,
itemStyle: {
normal: {
color: function(params) {
// build a color map as your need.
/*
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
*/
return colo[params.dataIndex];
},
label : {show: true,position:'top',formatter:'{c} %'}
}},
}
]
};
Setting background color, setting data, setting data color and so on are still very convenient.
Reprinted at: https://www.cnblogs.com/coprince/p/5580978.html