在vue项目使用数据可视化 echarts ,柱状图、折线图、饼状图使用示例详解及属性详解

官网地址:Apache ECharts

在vue项目使用数据可视化 echarts ,柱状图、折线图、饼状图使用示例详解及属性详解_第1张图片

​一、下载插件并在页面中引入

  npm install echarts --save

页面导入:

  import * as echarts from 'echarts'

全局导入: main.js 中,导入并注册到全局

  import echarts from 'echarts'
  Vue.prototype.$echarts = echarts

二、实现效果展示

在vue项目使用数据可视化 echarts ,柱状图、折线图、饼状图使用示例详解及属性详解_第2张图片

三、绘制柱状图使用步骤

 代码示例






// 根据需要添加类名修改样式

四、绘制折线图、饼图代码整合






你可能感兴趣的:(Vue,vue.js,信息可视化,echarts)