首先去echarst官网下载echarst然后放在项目中的js文件钟引入,下面是代码:
<script src="js/echarts.js"></script>
在html中放置一个块:
<div id="main" style="width: 600px;height:400px;"></div>
在js中初始化这个块:
var myChart = echarts.init(document.getElementById('main'));
在js中创建option数据,option里面有很多配置项用来创建修改图标的类型与内容。具体看官方文档
var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { show:true, //data: ['销量'] icon:'triangle', }, xAxis: { //type : 'value', }, yAxis: { //type : 'category', data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], }, series: [{ name: '销量', type: tyr, data: [5, 20, 36, 10, 10, 20] }] }; window.addEventListener('resize', function() { myChart.resize(); }); myChart.setOption(option);
最后是效果: