ECharts心得——常用图表的参数设置

Echarts使用有很多方式，这里我来说在 webpack 中使用 ECharts...

1. npm 安装 ECharts

npm i echarts -S

2.引入 ECharts
可以直接在项目中引用，这里是在main,js引用

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.直接使用

var mychart = this.$echarts.init(document.getElementById('mychart'));
mychart.setOption({
 color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            data:[10, 52, 200, 334, 390, 330, 220]
        }
    ]
})

这样简单的一个图表就成功了 如下图：

ECharts心得——常用图表的参数设置

下面直接奔入主题，对于一些公司的业务需要与图表打交道，比如大数据可视化平台，echarts就可以完美胜任了。

但是对于刚接触echarts的或者是不经常用的朋友，虽说简单好用 但是去改变echarts图表的样式还是很费时的。

毕竟官网的实例与公司业务或者UI的设计有些出入。。这样就需要改里面的参数了。

下面是我用到的图表总结的一些参数设置，我就不一一手写解释了，直接用图来展现出来

ECharts心得——常用图表的参数设置 ECharts心得——常用图表的参数设置 ECharts心得——常用图表的参数设置 ECharts心得——常用图表的参数设置 ECharts心得——常用图表的参数设置 ECharts心得——常用图表的参数设置

今天先整理到这里，后期增加关系图、仪表盘、散点图 以及我们的大地图......

整理地图相关参数：

屏幕快照 2019-02-01 上午11.20.47.png

①②③④

1. ECharts 中提供了两种格式的地图数据
   ① 可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据
   ②是 JSON 文件，需要通过 AJAX 异步加载后手动注册。
   2.下面是两种方式的代码示例
   script引入js方式

<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>

JSON引入方式

$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});

地图属性设置都会在geo对象中设置相应参数，下面介绍常用参数：

geo:{
    roam:true;//设置地图是否开启缩放和平移
    layoutCenter: ['90%', '53%'],//定义地图中心在屏幕中的位置
    layoutSize: "108%",//定义地图的大小
    itemStyle: {
            normal: {
                color: 'rgba(0, 0, 0, .5)', //片区颜色
                borderColor: 'rgba(255,255,0,1)' //片区边框颜色
            },
            emphasis: {
                color: 'rgba(37, 43, 61, .5)' //鼠标移动片区上的颜色
            }
        }



}

地图上的内容主要在serise中设置，

 {
            type: 'lines', //类型为折线
            zlevel: 2,//折线图所有图形的 zlevel 值。
            effect: {  //线特效的配置
                show: true, //是否显示特效。
                period: 4, //特效动画的时间，单位为 s。
                trailLength: 0.02, //特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
                symbol: 'arrow',//线两端的标记类型
                symbolSize: 5, //标记大小
            },
            lineStyle: {
                normal: {
                    width: 1,//线宽
                    opacity: 0.6, //线透明度
                    curveness: 0.2 //边的曲度，支持从 0 到 1 的值，值越大曲度越大
                }
            },
}

{
            type: 'effectScatter',//带有涟漪特效动画的散点
            coordinateSystem: 'geo',//使用地理坐标系
            zlevel: 2,//所有图形的 zlevel 值
            rippleEffect: {//涟漪特效相关配置。
                period: 4,//动画的周期，秒数。
                brushType: 'stroke',//波纹的绘制方式
                scale: 4//动画中波纹的最大缩放比例。
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',//图标周围字体位置
                    offset: [5, 0],//是否对文字进行偏移
                    formatter: '{b}'
                },
                emphasis: {
                    show: true
                }
            },
            symbol: 'circle',//标记的图形，可以设置图片
            // symbol:'image://http://xxx.xxx.xxx/a/b.png'
            symbolSize: function(val) {
                return 4 + val[2] / 10;//标记的大小，
            },
            itemStyle: {
                normal: {
                    show: false,
                    color: '#f00'
                }
            },
            data: item[1].map(function(dataItem) {
                return {
                    name: dataItem[0].name,
                    value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                };
            }),
        },

 //被攻击点
        {
            type: 'scatter',//散点（气泡）
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                period: 4,
                brushType: 'stroke',
                scale: 4
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    //                          offset:[5, 0],

                    color: '#00ffff',
                    formatter: '{b}',
                    textStyle: {
                        color: "#00ffff"
                    }
                },
                emphasis: {
                    show: true
                }
            },
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
                normal: {
                    show: true,
                    color: '#9966cc'
                }
            },
            data: [{
                name: item[0],
                value: geoCoordMap[item[0]].concat([100]),
            }],
        }