【ECharts系列·第一期】创建并引入使用ECharts图表 |
您所在的位置：网站首页 › e3v4系列图表 › 【ECharts系列·第一期】创建并引入使用ECharts图表 |
【ECharts系列·第一期】创建并引入使用ECharts图表
|
近期主要在做大数据相关的项目，所以对于ECharts图表做一个简单的总结吧 一、在HTML中使用ECharts图表1.引入 ECharts 通过标签方式直接引入构建好的 echarts 文件 2.绘制一个简单的图表 在绘图前我们需要为 ECharts 准备一个 具备高宽 的 DOM 容器。 然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图。 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);这样你的第一个图表就诞生了！ 1、安装echarts依赖 npm install echarts -S2、引入echarts (1)全局引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts(2)按需引入 // 引入 ECharts 主模块 var echarts = require('echarts/lib/echarts'); // 引入柱状图 require('echarts/lib/chart/bar'); // 引入折线图 require('echarts/lib/chart/line'); // 引入饼图 require('echarts/lib/chart/pie'); // 引入组件 require('echarts/lib/component/grid'); require('echarts/lib/component/tooltip'); require('echarts/lib/component/title'); require('echarts/lib/component/legend'); require('echarts/lib/component/legendScroll'); // (滚动图例) Vue.prototype.$echarts = echarts3、创建图表 (1)定一个有宽高的div |
【本文地址】