echart使用心得

最近在弄商城的图表数据,要用到了echart.js,echart是支持多种图表的,有折线图,饼图,柱形图等等,我们项目中主要用到的是饼图与折线图,这里就简单介绍下饼图与折线图。

和大多数的插件一样,必须要引用他的js,我们可以从echart官网,或者用npm 获取 echarts,npm install echarts --save  下载所需的js,这个就不多做介绍,官网上都有,

<script src="echarts.min.js"></script>

html中要准备一个具有宽和高额容器,

<div id='content'></div>

在js中写入绘图步骤,首先找到这个容器

// 基于准备好的dom,初始化echarts实例 

var myChart=echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

title: {

text: 'ECharts 入门示例'

},

tooltip: {},//鼠标提示

legend: {

data:['销量']

},

xAxis: {//x轴数据 data数据可为空,可以在请求完接口时,填入数据

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},//y轴数据

series: [{

name: '销量',

type: 'category',// 不同的图表对应不同的type

data: [5, 20, 36, 10, 10, 20]

}]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

里面一些特定的字段,具有特定的意义,如果想展示不同的效果还要去翻阅echart的官方api             http://echarts.baidu.com/api.html#echarts

如果是折线图,需要展示两条x轴数据,y轴不展示,对应写法 

xAxis:  [{

type:'category',

boundaryGap:false,

data: [],

axisLine:{

show:false

},

axisTick:{

show:false

}

},//第一条数据

{//第二条数据

type:'category',

boundaryGap:false,

data: [],

axisLine:{

show:false

},

axisTick:{

show:false

}

}],

yAxis: {

type:'value',

axisLabel: {

formatter:'{value}'

},

splitNumber:0,  //y轴数据间隔,这个默认好像是5 ,所以可以根据调这个大小,来调y轴数据

show:true,//控制y轴是否显示

min:0,//y轴最小数据

max:80,//y轴最大数据 

splitLine:{

show:false

}

},

echart非常强大,里面的功能也需要时间去研究,我这一两句也说不明白,大家如果用到 就去官网读代码吧

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧。我在...
    蓝色梦想家阅读 10,136评论 1 1
  • 一,v-charts简介 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-...
    美人宋阅读 59,192评论 0 14
  • 1、说明 1、echarts可以由直接引用(如下),也可通过webpack引用和打包(这里不做介绍) 2、异...
    秋秋秋web阅读 1,160评论 0 0
  • 真的是如此吗?
    慧雅梅子阅读 183评论 0 0
  • 上一章 第八章 进入微城(二) 当晚,当娅躺在床上,举着这份合同左看右看,合同内容已经阅读了三遍,没...
    文门草少阅读 321评论 0 0