模板网站建设包括哪些,wordpress怎么加关键词和描述,域名到期对网站的影响,浙江英文网站建设Echarts是一个基于JavaScript的开源可视化库#xff0c;由百度开发和维护。它通过简单的配置方式#xff0c;就可以实现各种复杂的数据可视化和图表展示。Echarts支持多种图表类型#xff0c;包括柱状图、折线图、饼图、散点图、漏斗图等#xff0c;同时还支持地图可视化和… Echarts是一个基于JavaScript的开源可视化库由百度开发和维护。它通过简单的配置方式就可以实现各种复杂的数据可视化和图表展示。Echarts支持多种图表类型包括柱状图、折线图、饼图、散点图、漏斗图等同时还支持地图可视化和3D可视化效果。Echarts具有高度可定制性和交互性支持动态数据更新和大数据量展示。Echarts提供了丰富的API和文档可以方便地与其他前端框架整合。Echarts被广泛应用于数据可视化领域特别是大数据分析和BI数据分析等领域。 一:快速构建vue项目
使用vue脚手架创建一个快速入门项目
vue create echarts-test 这里选择默认的vue2模板项目快速构建 运行命令启动项目
cd echarts-test
npm run serve 打开浏览器输入对应的端口就可以看到模板页面了 二引入echarts
2.1添加echarts包
在项目根目录执行命令
npm i echarts 这时候你就可以在package.json文件中找到添加的包 2.2全局引入echarts
在main.js中添加以下语句
import * as echarts from echarts
Vue.prototype.$echarts echarts 这样的目的是将echarts挂载到vue原型上可以直接通过$echarts直接使用 三echarts简单入门示例
3.1清理无用文件
将app.vue 内的无关内容清空
清空完的内容为
templatediv/div
/templatescriptexport default {name: App,components: {}
}
/scriptstyle/style3.2echarts示例图表
首先创建一个区域作为echarts图表的画布并设置对应的宽高和ref
templatedivdiv refecharts styleheight: 600px;width: 800px;/div/div
/template在挂载的时候获取echarts初始化和绘制图表
scriptexport default {name: App,mounted() {let chart this.$echarts.init(this.$refs.echarts)chart.setOption({title: {text: ECharts 入门示例,},tooltip: {},legend: {data: [销量],},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子],},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20],},],})},
} 效果如下图所示 更多图表可查看官网描述Apache ECharts
