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

1，echarts简介

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

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

type:"bar"是柱状图

type:"line"是折线图

type:"pie"是饼图 

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

要使用echarts的五个步骤：

看一下页面效果

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

 看一下页面效果：

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

 

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

看下效果

 

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

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

 

页面效果

 

再来做一个堆叠图

 页面效果

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

 

页面效果

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

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

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

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

打开echarts官网，按以下步骤

 

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

 

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

 页面效果

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