something about Echarts

Echarts 使用过程中遇到的问题，以及解决方法

echarts 调整图表 位置 的方法

let option = {  
	grid:{
		x:25, //'10%'
		y:45,
		x2:5,
		y2:20,
		borderWidth:1
	}
}

echarts 横屏展示

van久

option = {
    tooltip : {
        trigger: 'axis',
        extraCssText:'transform: rotate(90deg)'
    },    
    xAxis: {
        type: 'value', //数据
        position :'top', //x 轴的位置【top bottom】
        nameRotate :-90, //坐标轴名字旋转，角度值。
        axisLabel :{  //坐标轴刻度标签的相关设置。   
           rotate : 90 //刻度标签旋转的角度，
        },
        scale: true, //是否是脱离 0 值比例
    },
    yAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        inverse :'true', //是否是反向坐标轴。
        axisLabel :{
            rotate : -90
        },
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true //是否平滑曲线显示
    }]

ecahrts 样式修改为简洁版

yAxis: {
    type: 'value',
    axisTick: { // 坐标轴小标记
        show: false, // 属性show控制显示与否，默认不显示
    },
    splitLine: {
        show: true,
        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
            color: '#d9d9d9',
            type: 'dashed'
        },
    },
    axisLine: { // 坐标轴线
        show: false,
        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
            type: 'dashed'
        }
    },
    axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
        show: true,
        color: '#666',
        fontSize: 10,
    },
    name: '次数',
},
xAxis: {
    axisLine: {
        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
            color: '#d9d9d9',
            type: 'dashed'
        }
    },
    axisTick: { // 坐标轴小标记
        show: false, // 属性show控制显示与否，默认不显示
    },
    axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
        color: '#666',
        fontSize: 10,
    },
    type: 'category',
    data: data
},

设置上下限

series: {
    markLine: {
        itemStyle: {
            normal: { lineStyle: { type: 'solid', color:'#000' },label: { show: true, position:'left' } }
        },
        data: [
            {
                name: '平均线',
                // 支持 'average', 'min', 'max'
                type: 'average'
            },
            {
                name: 'Y 轴值为 100 的水平线',
                yAxis: 100
            },
            [
                {
                    // 起点和终点的项会共用一个 name
                    name: '最小值到最大值',
                    type: 'min'
                },
                {
                    type: 'max'
                }
            ],
            [
                {
                    name: '两个坐标之间的标线',
                    coord: [10, 20]
                },
                {
                    coord: [20, 30]
                }
            ], [{
                // 固定起点的 x 像素位置，用于模拟一条指向最大值的水平线
                yAxis: 'max',
                x: '90%'
            }, {
                type: 'max'
            }],
            [
                {
                    name: '两个屏幕坐标之间的标线',
                    x: 100,
                    y: 100
                },
                {
                    x: 500,
                    y: 200
                }
            ]
        ]
    }
}

图例组件展现了不同系列的标记(symbol)，颜色和名字。

legend: {
    selectedMode: 'single', //图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示 'single'单选，'multiple'多选，'false'关闭
    orient: 'vertical', //图例列表的布局朝向。 'horizontal' 横向
    bottom: '100',
    right: '0'
}

清除画布， 重绘

问题： 切换标签的时候，由于Y轴的坐标不一致，导致数据渲染出现绘图错误的问题。

let myChart = echarts.init(document.getElementById("id"));
let option = {...};

myChart.clear(); //清除画布
myChart.setOption(option, true); //是否重绘，true表示重绘，false表示不重绘

遇到的bug

问题： 在其他页面自定义了一个’china’的数据，原本目的是在本页面使用。结果影响到其他的页面的地图

// a页面定义，目的a页面使用
echarts.registerMap('china', geoJson);

// 结果影响b页面的地图渲染
series: [{
  name: '统计',
  type: 'map',
  map: 'china',
  top: '40px',
  aspectScale: '.75', //长宽比
  roam: false, //是否能移动
  zoom: 1.2,
  label: {
    normal: {
      show: false
    },
    emphasis: {
      show: true
    }
  },
  data: data
}]

原因： a, b 页面注册的地图都叫’china’, 更改a页面的echarts.registerMap(‘zhongguo’, geoJson)， 但还是不好用;

推荐： a, b 页面使用各自独立的注册地图。