简单使用ECharts

Echarts的简单使用

emmmm跟着官网敲 Orz

echarts 提供了下面这几种定制：

• 彻底版：echarts/dist/echarts.js，体积最大，包含全部的图表和组件，所包含内容参见：echarts/echarts.all.js。
• 经常使用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。
• 精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最经常使用的图表和组件，所包含内容参见：echarts/echarts.simple.js。
• 还有就是自定义构建

本身建立一个简单的html实现的

首先引入js文件

经过Echarts官网的自定义构建搭建了一个只包含小型饼图的js文件

由于只想画饼图因此这里只打包辽饼图

还有组件和坐标系提供下载

<script src="./js/echarts.min.js"></script>
复制代码

html中添加div

<div id="main" style="width: 600px;height:400px;margin: 60px auto;"></div>
复制代码

饼状图 js代码

var myChart = echarts.init(document.getElementById('main'));
option = {
  title : {
    text: 'Toki', //大标题
    subtext: 'Orz',  //相似于副标题
    x:'center'  //标题位置 居中
  },
  tooltip : {
    trigger: 'item',  //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
    formatter: "{a} <br/>{b} : {c} ({d}%)"  //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）用于鼠标悬浮时对应的显示格式和内容
  },
  legend: {
    orient: 'vertical', //图例列表的布局朝向
    left: 'left',
    data: ['吃','喝','睡','玩','？？？']
  },
  series : [  //系列列表。每一个系列经过 type 决定本身的图表类型
    {
      name: 'toki',
      type: 'pie',
      radius : '55%',
      center: ['50%', '60%'],
      data:[
        {value:335, name:'吃'},
        {value:310, name:'喝'},
        {value:234, name:'睡'},
        {value:135, name:'玩'},
        {value:1548, name:'？？？'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
myChart.setOption(option);  // 这句不能忘记辽
复制代码

实现效果