Echarts笔记

官方文档

链接地址 (opens new window)

在Vue项目中使用

1、通过npm获取echarts

npm install echarts --save

2、在main.js中引入

const echarts = require('echarts')
Vue.prototype.$echarts = echarts

3、在页面中创建容器(需设置宽高,否则不显示)

<div class="my-chart" ref="myChart"></div>

4、初始化chart

initChart() {
    let myChart = this.$echarts.init(this.$refs["myChart"]);
    let option={
        //根据需求配置
    }
    myChart.setOption(option);
}

配置项文档 (opens new window)

炫酷案例

更多资源 (opens new window)

-- 进度条

链接地址 (opens new window)

-- 水球图

需要安装依赖

npm install echarts-liquidfill --save