三步使用ECharts

最近闲来无事，把一直想学的eahrts简单看了一下，显然官网教程步骤已经很详细，但我习惯把他的东西用自己习惯的方法记下来，以后打开直接复制粘贴自己的文章也省事儿。

实例样图：

image.png

话不多说，直接引插件：

1.直接用cdn引入

<script src="https://cdn.bootcss.com/echarts/3.7.2/echarts.min.js"></script>

2.给图标一个容器，习惯div

/*css样式也给上*/
<style>
        #echarts_container{
            width: 500px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding-top: 30px;
        }
        h1{
            text-align: center;
            color: #666;
        }
</style>


<div id="echarts_container" ></div>

3.初始化一个echatrs

// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts_container'));
// 指定图表的配置项和数据
     var option = {
            title: {
                text: 'ECharts柱状示意图',
                left:50
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['销量','价格'],
                left:55,
                top:370,
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [
               {
                  name: '销量',
                  type: 'line',
                  smooth: true,
                  data: [5, 10, 22, 46, 36, 29]
               },
               {
                  name: '价格',
                  type: 'line',
                  smooth: true,
                  data: [11, 22, 39, 66, 50, 40]
              },            
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

本实例是折线图

简单介绍几个配置项：

• series里的type可以更改图表样式：line（折线），pie（饼状图），map（地图，配合映射组件visualMap：[]使用），scatter（散点），bar（柱状图）...
• toolbox：工具栏，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。（下图右上角）

image.png

• timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。
• title：标题组件，包含主标题和副标题。
• legend：图例组件。
  更多配置参考：http://echarts.baidu.com/option.html#toolbox

文章会持续更新，一起进步。 如果本文对你有帮助，欢迎点赞~