一、下载并安装
（一）官网
https://echarts.apache.org/zh/index.html
（二）下载依赖
1. 官网里选择下载方式
https://echarts.apache.org/handbook/zh/basics/download/
2. 官网github方式下载
https://github.com/apache/echarts/blob/master/dist/echarts.min.js
进入网页后，点击“下载”按钮
（三）配置依赖
1. 依赖文件放置在 static/js 中
2. 模板中插入依赖文件
<head><script type="text/javascript" src="{% static 'js/echarts.min.js' %}"></script>
</head>二、制作柱状条形图
（一）html
<div id="main_div" style="overflow: hidden"><h1>测试Echarts的界面<h1><button id="btn_echarts">点击测试</button><div id="show_echart"><div id="sys_echart"></div></div>
</div>
<style>
#main_div {display: flex;flex-direction: column;align-items: center;justify-content: center;margin: 20px;background-color: white;
}#show_echart{display: flex; justify-content: space-evenly; flex-flow: nowrap; width: 1000px;
}#sys_echart{width: 100%; height:500px;
}
</style>（二）js
设置图表缩放、文字竖向、展示数值、数值的位置 、滚动条、图表动态赋值
<script type="text/javascript">
$(document).ready(function () {var sys_echart = echarts.init(document.getElementById('sys_echart')); // 获取图表domwindow.addEventListener('resize', function () { // 监听窗口大小变化事件sys_echart.resize(); // 重新设置echarts图表的宽度和高度});// 注意window.addEventListener监听事件必须放在document.getElementById('if_echart').style.display='none'的前面document.getElementById('show_echart').style.display='none'; // 初始化时，先隐藏图表内容var echart_option = { // 图表初始化设置grid: { // 解决X轴、Y轴文字显示不全的问题left: '3%',right: '6%', bottom: '3%',containLabel: true},xAxis: {name: '类型',data: [], // ['科幻', '教育', '文学']axisLabel: { // 设置坐标轴刻度标签interval: 0, // 坐标轴刻度标签的显示间隔（若为2，则隔2个标签显示标签名）rotate: 90, // 刻度标签旋转的角度（设置文字整体转向）},// 或者// axisLabel: { // 设置X轴文字显示顺序为竖向// interval: 0,// formatter: function(value) { // return value.split('').join('\n')// }// }},yAxis: {name: '销量',},series: [{type: 'bar', // 设置为柱状条形图data: [], // [10, 20, 30, 60] // Y轴数据label: {show: true, // 每根柱子上显示数据position: 'insideBottom', // 在上方显示textStyle: { // 数值样式color: 'black',fontSize: 16},rotate: 90, // 柱子上的文字方向align: 'left',verticalAlign: 'middle',}}],dataZoom: [ // x轴滚动条(X轴数据过多, 左右滚动显示){ type: 'slider', // X轴下方展示滚动条show: true, // 是否显示滚动条xAxisIndex: [0], // 控制X轴，数组可以同时控制多个轴realtime: true,height: 10, // 组件高度start: 0, // 滚动条开始位置end: 40 // 滚动条结束位置（默认一次性展示100个）}, {type: 'inside', // 滚动条内置在坐标系中（可直接在图中进行左右滚动）xAxisIndex: [0],start: 0,end: 40}]};$("#btn_echarts").click(function () {document.getElementById('show_echart').style.display='none'; // 清空图表$.ajax({url: window.location.pathname, // 当前页面路由type: 'post',data: {},success: function (res) {document.getElementById('show_echart').style.display='flex'; // 显示图表let x_data = res.echart_data['x_data'];let y_data = res.echart_data['y_data'];// X轴和Y轴数据都存在时if (Object.keys(res.echart_data).length>0 && x_data.length!=0 && y_data.length!=0) {echart_option.xAxis.data=x_data; // X轴赋值echart_option.series[0].data=y_data; // Y轴赋值sys_echart.setOption(echart_option); // 图表设置生效}}})});
});
</script>
