echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色

1,echarts简介

  • JavaScript的图表库
  • 百度捐给apache基金会
  • 比较符合中国人习惯
  • HeightCharts , D3为同行

2,下面先介绍几个常用的图表类型type:

type:"bar"是柱状图

type:"line"是折线图

type:"pie"是饼图 

3,废话不说,直接上案例

要使用echarts的五个步骤:

echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第1张图片

看一下页面效果

echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第2张图片

我们还可以在同一个容器或创建的实例中放入多个图表,:

echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第3张图片

 看一下页面效果:

echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第4张图片

我们可以改一下图表的颜色

 echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第5张图片

修改一下鼠标经过时的高亮色

echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第6张图片

看下效果

echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第7张图片

 

鼠标经过物理列,颜色变深了

接下来做一个特殊样式,让柱体变成圆角,让折线变成原点粗线,并让其颜色实现渐变效果

echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第8张图片

 

页面效果

echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第9张图片

 

再来做一个堆叠图

echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第10张图片

 页面效果

echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第11张图片

下面设置富文本,控制文字大小和颜色

 echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第12张图片

页面效果

echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第13张图片

 可以看到百分数是36px,而百度是12px且颜色不一样,已经达到了控制具体字体的目标

下面是如何自定义主题,echarts给我们提供了两个主题dark和light

dark是深色主题,light是亮色或浅色主题,echarts默认是浅色,想改变主题颜色只需在创建实例时设置

 但是只有这两种,不够我们选择,可以自定义主题吗,答案是当然可以

打开echarts官网,按以下步骤

echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第14张图片

 echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第15张图片

在这里可自定义主题,接下来选择一套 

 echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第16张图片

 下载后我们得到一个js文件,引入到我们的页面中

echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第17张图片

 页面效果

echarts图表应用,做出特殊样式,加渐变,圆角,可自定义主题及各种颜色_第18张图片

 以上就是echarts图表的简单运用了,你学废了嘛?

你可能感兴趣的:(前端,echarts)