Echart的学习之路（一）

来源：互联网发布：老王python完整版本编辑：程序博客网时间：2024/06/05 17:54

1.Echart的使用的简单配置（标签单文件的引入）

第一步：引用echart.js文件

第二步：添加图表容器（采用的是本地引用js文件）

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>echart的简单配置</title><script src="echarts/echarts.js"></script></head><body><div id="chartmain" style="width:600px; height: 400px;"></div></body></html>

也可采用在线引用的方式，将引用的文件改为<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

第三步：设置图表参数，进行初始化，可在echart的使用的实例粘贴改造
<script type="text/javascript">    // 初始化图表标签    var myChart = echarts.init(document.getElementById('chartmain'));    var options={        //定义一个标题        title:{            text:'测试成绩'        },        legend:{            data:['销量']        },        //X轴设置        xAxis:{            data:['60分','70分','80分','90分','100分']        },        yAxis:{        },        //name=legend.data的时候才能显示图例        series:[{            name:'销量',            type:'bar',            data:['12','32','45','21','1']        }]    };    myChart.setOption(options);</script>

第四步 效果如下

阅读全文

0 0

Echart的学习之路（一）

1.Echart的使用的简单配置（标签单文件的引入）

第一步：引用echart.js文件

第二步：添加图表容器（采用的是本地引用js文件）
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>echart的简单配置</title><script src="echarts/echarts.js"></script></head><body><div id="chartmain" style="width:600px; height: 400px;"></div></body></html>

也可采用在线引用的方式，将引用的文件改为
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

第三步：设置图表参数，进行初始化，可在echart的使用的实例粘贴改造

第四步效果如下

Echart的学习之路（一）

1.Echart的使用的简单配置（标签单文件的引入）

第一步：引用echart.js文件

第二步：添加图表容器（采用的是本地引用js文件）<!DOCTYPE html><html><head><meta charset="UTF-8"><title>echart的简单配置</title><script src="echarts/echarts.js"></script></head><body><div id="chartmain" style="width:600px; height: 400px;"></div></body></html>

也可采用在线引用的方式，将引用的文件改为<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

第三步：设置图表参数，进行初始化，可在echart的使用的实例粘贴改造

第四步 效果如下

第二步：添加图表容器（采用的是本地引用js文件）
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>echart的简单配置</title><script src="echarts/echarts.js"></script></head><body><div id="chartmain" style="width:600px; height: 400px;"></div></body></html>

也可采用在线引用的方式，将引用的文件改为
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

第四步效果如下