第一种：Echarts GitHub链接:https://github.com/apache/incubator-echarts
如果想要查看所有的属性，可查看：https://www.echartsjs.com/zh/cheat-sheet.html || https://blog.csdn.net/qq_38382380/article/details/80436269
①制作表格 【需在github上下载文件，引入echarts.min.js文件(dist文件夹下，一定要先下载)】
<script src="echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>(宽高一定要设置，不然无法显示)
var myChart = echarts.init(document.getElementById(\'main\'));
var option = {
title: {text: \'ECharts 入门示例\'},
color:[\'red\'],//柱状图柱子颜色(可以添加多个值)
tooltip: {},
legend: {
data: [\'销量\']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: \'销量\',
type: \'bar\',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
第二种方法：ichartjs github链接：https://github.com/wanghetommy/ichartjs
①制作表格
首先去github下载文件，引入ichart.1.2.1.min.js文件
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
其次html中写入
<div id="canvasDiv"></div>
然后 script 中
var data = [
{ name: \'H\', value: 7, color: \'#a5c2d5\' },
{ name: \'E\', value: 5, color: \'#cbab4f\' },
{ name: \'L\', value: 12, color: \'#76a871\' }
];
$(function () {
var chart = new iChart.Column2D({
render: \'canvasDiv\',//渲染的Dom目标,canvasDiv为Dom的ID
data: data,//绑定数据
title: \'Hello World\\'s Height In Alphabet\',//设置标题
width: 800,//设置宽度，默认单位为px
height: 400,//设置高度，默认单位为px
shadow: true,//激活阴影
shadow_color: \'#c7c7c7\',//设置阴影颜色
coordinate: {//配置自定义坐标轴
scale: [{//配置自定义值轴
position: \'left\',//配置左值轴
start_scale: 0,//设置开始刻度为0
end_scale: 26,//设置结束刻度为26
scale_space: 2,//设置刻度间距
listeners: {//配置事件
parseText: function (t, x, y) {//设置解析值轴文本
return { text: t + " cm" }
}
}
}]
}
});
//调用绘图方法开始绘图
chart.draw();
});