echarts常用属性

echarts的使用是通过配置项来实现的， 配置项对应网址： https://echarts.apache.org/zh/option.html#title，常用的配置如下：

属性	释义
title	标题
legend	图例
grid	网格，图表距容器边界的距离
xAxis	x轴
yAxis	y轴
tooltip	提示框
series	图表类型
backgroundColor	图表的背景颜色
color	图表中各系列的颜色

1、title 标题

title: {
        text: '某站点用户访问来源',//标题
        subtext: '纯属虚构',//副标题
        left: 'center',//
    },

2、legend 图例

legend: {
        orient: 'vertical',//图例列表的布局朝向, vertical 垂直,horizontal 水平
        left: 'left',//图例位置
        icon: "rect",//图例样式 ,'circle' 圆形, 'rect'方块, 'roundRect' 方块圆角, 'triangle' 三角形, 'diamond' 菱形, 'pin' 圆形, 'arrow' 箭头, 'none' 无; 可以通过 'image://url' 设置为图片，其中 url 为图片的链接
    },

3、grid 网格

 grid: {
          top: "25%",// 距离容器 顶部 距离
          bottom: "0%",// 距离容器 底部 距离
          left: "2%",// 距离容器 左侧 距离
          right: "2%",// 距离容器 右侧 距离
          containLabel: true,// 图表内容距离容器边界是否包含坐标轴
        },

4、xAxis x轴

xAxis: [
          {
            type: "category",//轴类型
            name:"个",//坐标轴名称,一般是用来表示数据的单位
            axisLine: {
              //轴线
              show: false
            },
            axisLabel: {
              //轴文字
              color: "#A0B2D3", 
              interval:1,//强制完全显示轴所有数据
            },
            splitLine: {
              //网格线
              show: false 
            },
            axisTick: {
              //轴刻度线
              show: false
            }
            data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//轴数据
          }
      ],

5、yAxis y轴

y轴与x轴的配置类似

yAxis: [
          {
            type: "category",//轴类型
            name:"个",//坐标轴名称,一般是用来表示数据的单位
            axisLine: {
              //轴线
              show: false
            },
            axisLabel: {
              //轴文字
              color: "#A0B2D3", 
              interval:1,//强制完全显示轴所有数据
            },
            splitLine: {
              //网格线
              show: false 
            },
            axisTick: {
              //轴刻度线
              show: false
            }
            data: [120, 150, 140, 160, 170, 150, 120, 110, 160, 178, 150,168],//轴数据
          }
      ],

6、tooltip 提示框

tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },

7、series 图表类型

series: [
          {
           type: "bar",//柱状图
            name: "网站访问量",
            barWidth: 20,//柱状图宽度
            showBackground: true,//是否显示柱图背景颜色
            backgroundStyle: {
            //柱图背景颜色
              color: "#071527"
            }
            data: [120, 150, 140, 160, 170, 150, 120, 110, 160, 178, 150],
          }
        ]

series: [
          {
            type: "line",
            name: "活动数量",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆  拐点形状
            hoverAnimation: true,
            symbolSize: 8, //标记的大小 拐点形状的大小
            itemStyle: {
              //折线拐点标志的样式
              color: "#F7D775",
            },
            lineStyle: {
              //折线
              color: "#F7D775",//折线颜色
              width: 2,//折线大小
            }
            // 鼠标滑过圆点颜色
            emphasis: {
              itemStyle: {
                color: "#fff",
                borderColor: "#F7D775",
                shadowBlur: 10,
              },
            },
            data: [4, 3, 2, 8, 6],
        ]

 series: [
          {
           type: "pie",
            name: "访问来源",
            radius: ["60%", "30%"],//外圆与内圆的大小（环） radius: '50%'=>整个圆
            center: ["25%", "50%"], //这个属性调整图像的位置
            hoverAnimation: false,
            label: {
              //数值
              show: false,
              position: "center"
            },
            labelLine: {
              //线
              show: false
            },
            data:[
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
          }
        ]

8、backgroundColor 图表的背景颜色

backgroundColor: "#0B1321",

9、color 图表中各系列的颜色

color : ["#5599EC", "#00EA9C", "#F9CE16", "#FF913F"]

10、完整示例

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};