1. 使用Echarts五部曲
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="js/echarts.min.js"></script><scriptsrc="js/jquery.min.js"></script><style>.box { width: 400px; height: 400px; background: skyblue; } </style></head><body><divclass="box"></div><script>// <!-- 首先进行初始化 -->varmyEcharts=echarts.init(document.querySelector('.box')); // 指定图表的配置项和数据varoption= { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。myEcharts.setOption(option); </script></body></html>
2. 选择不同类型的图表
在官网实例中找你需要的图表复制代码即可。
3. 相关的配置
