1. 下载echarts.js文件
方法一：
直接在编辑器的终端输入以下命令：
npm install echarts --save然后在node_modules/echarts/dist/文件夹下，就可以看到下载的echarts的js文件了。
方法二：
直接在echarts官网，找到下载，点击dist，然后把他放到你项目创建一个js文件夹里面
2. 创建有大小的容器(一定要有大小，不然图表不会显示）
<div class='tubiao1'> </div> <div class='tubiao2'> </div> <style> .tubiao{ width: 300px; height:300px; }3. 初始化实例对象（用js写）
假如我只想给第二个div添加图表
dom容器就通过get类名获取名为tubiao的dom元素，也就是前面的div。
<script> //初始化实例对象:echarts.init(dom容器); var mychart = echarts.init(document.querySelector('.tubiao2')); </script>4. 指定配置项和数据（option）
option就是你想要图表样式的具体数据
我以柱状图为例，点开想要选择的柱状图样式，需要js代码就选择js，需要ts代码就需要ts，复制有关配置项放入项目的js文件即可。
我单独建立了一个js文件来放配置文件（mychart.js）
注意：结尾一定要写export default +配置名，这样才能导出配置，在另外的vue的js中引入。
let xAxisData = []; let data1 = []; let data2 = []; let data3 = []; let data4 = []; for (let i = 0; i < 10; i++) { xAxisData.push('Class' + i); data1.push(+(Math.random() * 2).toFixed(2)); data2.push(+(Math.random() * 5).toFixed(2)); data3.push(+(Math.random() + 0.3).toFixed(2)); data4.push(+Math.random().toFixed(2)); } var emphasisStyle = { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.3)' } }; var myOption = { legend: { data: ['bar', 'bar2', 'bar3', 'bar4'], left: '10%' }, brush: { toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'], xAxisIndex: 0 }, toolbox: { feature: { magicType: { type: ['stack'] }, dataView: {} } }, tooltip: {}, xAxis: { data: xAxisData, name: 'X Axis', axisLine: { onZero: true }, splitLine: { show: false }, splitArea: { show: false } }, yAxis: {}, grid: { bottom: 100 }, series: [ { name: 'bar', type: 'bar', stack: 'one', emphasis: emphasisStyle, data: data1 }, { name: 'bar2', type: 'bar', stack: 'one', emphasis: emphasisStyle, data: data2 }, { name: 'bar3', type: 'bar', stack: 'two', emphasis: emphasisStyle, data: data3 }, { name: 'bar4', type: 'bar', stack: 'two', emphasis: emphasisStyle, data: data4 } ] }; export default myOption;5. 将配置项设置给实例化对象.setOption
chart.setOption(myOption)
6. 完整代码
（1）在App.vue中写入：（备注：首先，这里方便学习写入所以放入的app.vue，一般来说是放入组件，不放在app.vue里面的。 其次，这一段也可以在.html文件中写入，我是vue项目所以用vue来举例，完全可以copy到html中，一模一样的）
<script setup lang="js"> import { onMounted } from 'vue'; import * as echarts from 'echarts'; import myOption from '../../js/left-onetu.js'; onMounted(() => { // 使用 document.querySelector 获取 DOM 元素 const chartDom = document.querySelector('.one-content'); if (chartDom) { const chartInstance = echarts.init(chartDom); chartInstance.setOption(myOption); // 处理窗口大小变化 window.addEventListener('resize', () => { chartInstance.resize(); }); } }); </script> <template> <div class='one-content'></div> </template> <style> .one-content{ width:300px; height:300px; } </style>（2）在tubiao.js文件中写入：
let xAxisData = []; let data1 = []; let data2 = []; let data3 = []; let data4 = []; for (let i = 0; i < 10; i++) { xAxisData.push('Class' + i); data1.push(+(Math.random() * 2).toFixed(2)); data2.push(+(Math.random() * 5).toFixed(2)); data3.push(+(Math.random() + 0.3).toFixed(2)); data4.push(+Math.random().toFixed(2)); } var emphasisStyle = { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.3)' } }; option = { legend: { data: ['bar', 'bar2', 'bar3', 'bar4'], left: '10%' }, brush: { toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'], xAxisIndex: 0 }, toolbox: { feature: { magicType: { type: ['stack'] }, dataView: {} } }, tooltip: {}, xAxis: { data: xAxisData, name: 'X Axis', axisLine: { onZero: true }, splitLine: { show: false }, splitArea: { show: false } }, yAxis: {}, grid: { bottom: 100 }, series: [ { name: 'bar', type: 'bar', stack: 'one', emphasis: emphasisStyle, data: data1 }, { name: 'bar2', type: 'bar', stack: 'one', emphasis: emphasisStyle, data: data2 }, { name: 'bar3', type: 'bar', stack: 'two', emphasis: emphasisStyle, data: data3 }, { name: 'bar4', type: 'bar', stack: 'two', emphasis: emphasisStyle, data: data4 } ] }; myChart.on('brushSelected', function (params) { var brushed = []; var brushComponent = params.batch[0]; for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) { var rawIndices = brushComponent.selected[sIdx].dataIndex; brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', ')); } myChart.setOption({ title: { backgroundColor: '#333', text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'), bottom: 0, right: '10%', width: 100, textStyle: { fontSize: 12, color: '#fff' } } }); });
