javascript ecmascript echarts的基础知识及应用

一、echarts的基础概念

 1、什么是echarts

        ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，变成了免费开源。

与echats同竞争的还有heightCharts和D3

 2、使用echats的好处

        更好的通过图表展示数据（大数据可视化）

3、echarts中常用的术语

tooltip：图标的提示title：标题legend图例xAxis、yAxis轴线tooltip提示toolbox工具箱

4、网站

           https://echarts.apache.org/zh/cheat-sheet.html

二、常见的图表

1、pie 饼状图

 2、柱状图

 3、折线图

三、主题颜色及特殊样式

1、主题样式

    light     dark     自定义     https://echarts.apache.org/zh/theme-builder.html

2、特殊样式

渐变色的样式及其使用

//定义渐变

var linear = {

type: 'linear',

x: 0,

y: 0,

x2: 0,

y2: 1,

colorStops: [{

offset: 0, color: '#02bcff' // 0% 处的颜色

}, {

offset: 1, color: '#5555ff' // 100% 处的颜色

}],

global: false // 缺省为 false

}

//使用

itemStyle: {

color: linear,

borderRadius: [30, 30, 0, 0] //圆角

}

3、rich 富文本

formatter: "{big|{d}}{small|%}\n{b}",

rich: {

big: {

color: "#f70",

fontSize: "48px",

fontWeight: 900,

},

small: {

color: "#f70",

}

}

4、堆叠

四、echarts的动态效果

1、自动播放

2、 animation 动画弹起效果

//每个执行延迟的时候（idx）就是下标，随着下标的增大延迟会长

animationDelay: function (idx) {

//越往后数据延迟越大

return idx * 200

},

animationDuration: function (idx) {

return idx * 100

},

//弹性方式出先画面

animationEasing: "bounceInout"

3、发送一个提示效果

var ind = 0;

var id = setInterval(play, 3000);

function play() {

//发送一个显示提示的动作

echart.dispatchAction({

type: "showTip",

//系列的index 在tooltip的trigger 为axis 的时候可选

seriesIndex: 0,

dataIndex: ind,

position: "top"

})

ind++;

if (ind >= 20) {

ind = 0

}

}

 五、总结

1、echarts官网：

Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/index.html

2、入门实例：

Handbook - Apache EChartshttps://echarts.apache.org/handbook/zh/get-started/

3、使用类的方法

 4、运用实例的方法

 5、标签与事件

 6、选项的配置：option的修改

精彩内容