ECharts笔记

使用五步骤：

引入echart.js→准备显示的盒子→初始化echarts实例对象→准备配置项→将配置项设置给echarts实例对象

通用配置(所有配置项都可以添加）

        // 标题
		title: {
          text: '期末语文成绩',
          textStyle: {
            color: 'skyblue',
          },
          borderWidth: 3,
          borderColor: 'pink',
          borderRadius: 10,
          left: 50,
          top: 20,
        },
        // 提示
        tooltip: {
          trigger: 'item',
          triggerOn: 'click',
          formatter: function (arg) {
            return arg.name + '的成绩是' + arg.data
          },
        },
        // 工具       
        toolbox: {
          feature: {
            saveAsImage: {},  //导出图片
            dataView: {},	  //数据视图(可操作)
            magicType: {      //动态类型切换(切换为其他视图)
              type: ['bar', 'line'],
            },
            dataZoom: {},	  //数据区域缩放
            restore: {},      //重置视图
          },
        },
        //筛选 配合series使用 data中的值就是series数组中每个对象的name值
   

直角坐标系的常用配置

 var option = {
        grid: {
          show: true,
          borderWidth: 10,
          borderColor:'skyblue',
          width:100,
          height:80,
          left:100,
          top:100
        },
        xAxis: {
          type: 'category',
          data: xData,
          position:'top'
        },
        yAxis: {
          type: 'value',
          position:'right'
        },
     //区域缩放
            dataZoom: [
           //start|end:数据窗口分为起始|结束百分比
          { type: 'slider', xAxisIndex: 0, start: 0, end: 0 }, 
          { type: 'slider', yAxisIndex: 0 },
        ],
     }

柱状图

    var xDataArr = [
        '张三',
        '李四',
        '王五',
        '闰土',
        '小明',
        '茅台',
        '二妞',
        '大强',
      ] // 准备x轴数据
      var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
      var yDataArr1 = [77, 82, 73, 67, 104, 80, 62, 96]
      let option = {
        legend: {
          data: ['语文', '英语'],
        },
        xAxis: {
          type: 'category',
          data: xDataArr,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '语文',
            type: 'bar',
            data: yDataArr,
            itemStyle: {
              color: {
                // 渐变方式
                type: 'linear',
                // 渐变方向
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                // 渐变区间及渐变颜色
                colorStops: [
                  { offset: 0, color: 'pink' },
                  { offset: 1, color: 'skyblue' },
                ],
              },
            },
            //标志点呈现最大最小值
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            //标志线呈现平均值
            markLine: {
              data: [{ type: 'average', name: '平均值' }],
            },
            //数值显示属性
            label: {
              show: true,
              rotate: 50,
              position: 'top',
            },
            //柱宽
            barWidth: '30%',
          },
          {
            name: '英语',
            type: 'bar',
            data: yDataArr1,
          },
        ],
      }

折线图

 let option = {
        xAxis: {
          type: 'category',
          data: xDataArr,
          //横轴第一个元素是否紧挨边缘
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          //纵轴脱离0值比例
          scale: true,
        },
        series: [
          {
            name: '康师傅',
            type: 'line',
            data: yDataArr,
            markPoint: {
              data: [{ type: 'max' }, { type: 'min' }],
            },
            markLine: {
              data: [{ type: 'average' }],
            },
            // 标注区间
            markArea: {
              data: [
                [{ xAxis: '1月' }, { xAxis: '2月' }],
                [{ xAxis: '7月' }, { xAxis: '9月' }],
              ],
            },
            //平滑折线
            smooth: true,
            // 折线样式
            lineStyle: {
              color: 'green',
              type: 'dotted', //dashed dotted solid
            },
            //折线生成面积的样式
            areaStyle: {},
            //实现堆叠图
            stack: 'all',
          },
          {
            name: '统一',
            type: 'line',
            data: yDataArr1,
            areaStyle: {},
            //实现堆叠图
            stack: 'all',
          },
        ],
      }

散点图[[],[],[]…]

data=[{},{}....]  数据  
 var axisData = []
      for (var i = 0; i < data.length; i++) {
        var height = data[i].height
        var weight = data[i].weight
        var newArr = [height, weight]
        axisData.push(newArr)
      }
      console.log(axisData)
      var mCharts = echarts.init(document.querySelector('div'))
      var option = {
        xAxis: {
          type: 'value',
          scale: true,
        },
        yAxis: {
          type: 'value',
          scale: true,
        },
        series: [
          {
            // type: 'scatter',
            type: 'effectScatter', // 指明图表为带涟漪动画的散点图
            showEffectOn: 'emphasis', // 出现涟漪动画的时机 render emphasis鼠标停滞上方时
            rippleEffect: {
              scale: 10, // 涟漪动画时, 散点的缩放比例
            },
            data: axisData,
            // symbolSize: 30
            symbolSize: function (arg) {
              // 控制散点的大小
              // console.log(arg)
              var height = arg[0] / 100
              var weight = arg[1]
              // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
              var bmi = weight / (height * height)
              if (bmi > 28) {
                return 20
              }
              return 5
            },
            itemStyle: {
              // 控制散点的样式
              color: function (arg) {
                // console.log(arg)
                var height = arg.data[0] / 100
                var weight = arg.data[1]
                // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
                var bmi = weight / (height * height)
                if (bmi > 28) {
                  return 'red'
                }
                return 'green'
              },
            },
          },
        ],
      }

饼图[{name:xx,value:yy},{name:xx,value:yy}…]

      var option = {
        series: [
          {
            type: 'pie',
            data: pieData,
            label: {
              show: true,
              formatter: function (arg) {
                return (
                  '在' +
                  arg.name +
                  '花费了' +
                  arg.value +
                  '元 占比' +
                  arg.percent +
                  '%'
                )
              },
            },
            // radius: 40,    设置半径
            // radius:["50%","75%"]    //圆环图
            roseType: 'radius', //南丁格尔图  根据半径据数值决定
            selectedMode: 'single', //single|multiple 单个|多个选中偏移
            selectedOffset: 30,   //偏移量
          },
        ],
      }

地图基本操作

准备基础模板→准备地图数据→使用Ajax获取地图数据， 在Ajax的回调函数中, 往 echarts 全局对象注册地图的 json 数据→配置 geo 节点→将series下的数据与geo关联起来type: ‘map’,geoIndex: 0→结合visualMap实现控制

     $.get('/map/china.json', function (ret) {
        echarts.registerMap('chinaMap', ret)
        let option = {
          geo: {
            type: 'map',
            map: 'chinaMap',
            roam: true, //设置允许缩放
            label: {
              show: true,
            },
            zoom: 1, //初始化缩放比例
            /*  center: [87.6, 43.79], 设置地图中心经纬度 */
          },
          series: [
            {
              type: 'map',
              geoIndex: 0, //关联第一个geo
              data: airData,
            },
            {
              data: scatterDate,
              type: 'effectScatter',
              coordinateSystem: 'geo', //指明散点使用的坐标系统
              rippleEffect: {
                scale: 10,
              },
            },
          ],
          visualMap: {
            min: 0,
            max: 300,
            // 控制颜色渐变范围
            inRange: {
              color: ['white', 'red'],
            },
            // 范围控制
            calculable: true,
          },
        }
        mCharts.setOption(option)
      })

雷达图

let HW = [80, 90, 80, 82, 90]
      let ZX = [70, 80, 71, 77, 72]
      let dataMax = [
        { name: '易用性', max: 100 },
        { name: '功能', max: 100 },
        { name: '拍照', max: 100 },
        { name: '跑分', max: 100 },
        { name: '续航', max: 100 },
      ]
      let option = {
        legend: {
          data: ['华为手机', '中兴手机'],
        },
        radar: {
          // 设置各个维度的最大值
          indicator: dataMax,
          // 指定雷达图形
          shape:'circle'
        },
        series: [
          {
            data: [
              { name: '华为手机', value: HW },
              { name: '中兴手机', value: ZX },
            ],
            type: 'radar',
            label: {
              show: true,
            },
            // 为雷达面积填充阴影
            areaStyle:{}
          },
        ],
      }

仪表盘

 let gaugeData = [{ value: 80,itemStyle:{color:'skyblue'}}, { value: 66,itemStyle:{color:'pink'}}]
      let option = {
        series: [
          {
            type: 'gauge',
            data: gaugeData,
            // 设置仪表盘数值范围
            min:10,   
            max:90
          },
        ],
      }

图表自适应的实现

    //监听窗口变化  
	window.onresize = function(){
        mCharts.resize()     //mCharts是图表实例变化
      }

图表的动画

	//加载动画
	mCharts.showLoading()
	//隐藏动画
	mCharts.hideLOading()
	//增量动画
	通过事件产生新的option，然后setOption(新的option),新旧option会相互整合
	//动画的配置
	animation:true||false    //开启关闭动画
    animationDuration:2000    //动画持续时间
    animationEasing:'linear'   //缓动动画
    animationThreshold:10     //动画元素的阈值 超过该值动画将不会显现

API

echarts方法：
echarts.connect([mCharts,mcharts2])    //将两个图表关联起来 比如保存图表1选项就可以图一图二一起保存

echarts实例方法：
/*事件绑定|解绑 on|off,
 鼠标事件包括click、dbclick、mousedown、mousemove、mouseup
 Echarts事件包括legendselectchanged、datazoom、pieselectchanged、mapselectchanged*/
mcharts.on|off('事件',function(arg){arg是包含事件信息的对象})
//主动触发事件dispatchAction
mcharts.dispatchAction({
    type:'事件类型',
    seriesIndex:'系列索引'
    dataIndex:'数据索引'
})
//清空图表实例 可以重新mcharts.setOption(option)
mcharts.clear()
//清除图表实例 不可恢复
mcharts.dispose()

原文地址：http://www.cnblogs.com/kq981024/p/16796024.html