echarts相关知识

引入echarts并使用

1. 下载echarts库
2. 准备一个具备大小的DOM容器
3. 初始化echarts实例对象
4. 指定配置项和数据（option）
5. 将配置项设置给echarts实例对象

安装echarts
npm install echarts --save

在项目中使用echarts
//引入echarts
import * as echarts from 'echarts';

//获取dom容器
var chartDom = document.getElementById('main');
//初始化echarts实例对象
var myChart = echarts.init(chartDom);

//设置配置项和数据
var option;
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

//将配置项设置给echarts实例对象
option && myChart.setOption(option);

//可以让echarts图标和屏幕一起缩放
window.addEventLisener("resize", function(){ myChart.resize() })

echarts图标基本布局

一些可以注意的点

可以参考官方文档 echarts.apache.org/zh/option.h…

1. series里面有了那么name值,那么legend里面的data可以删除（可以不用写）。
2. 注意：需要让图表跟着屏幕进行缩放。window.addEventLisener("resize", function(){ myChart.resize() })
3. color设置线条的颜色，是个数组。(和series是平级的)
4. 坐标轴的一些样式：yAxis可以是一个数组，当有多个对象的时候，可以通过设置yAxisIndex来设置层叠。x轴也有这个样式。

 xAxis: {
    type: 'value',
    name: 'Days',
    axisLabel: {
      formatter: '{value}'
    }，
    axisLine:{}, //轴的样式
    axisTick:{}, //刻度的样式
    splitLine:{}, //分割线的样式
    inverse:true, //可以设置数据翻转
  }

5. 柱状图柱子的样式在series里面修改。
6. 柱状图只显示框框：把color设置成none，然后设置边框颜色borderColor成自己想要的颜色。

  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'bar',
      barwidth:"50%",//设置宽度
      barCategoryGap:50，//柱子之间的距离
      itemStyle:{
      barBorderRadius: 5;//设置圆角
      color:"pink"; //也可以在这里设置圆柱的颜色
      color:function(params){
        return myColor[params.dataIndex]
       }//或者可以使用这种方式修改颜色
      }
    }
  ]

7. 折线图

  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      smooth:true,//可以让折线图变得平滑
      lineStyle:{ //可以修改线得样式
         width:5
      },
      areaStyle:{ //可以修改填充区域得颜色
        color:'pink',//如果想使用渐变色可以使用 new echarts.graphic.LinearGradient()
      },
      symbol:"circle", //设置拐点
      symbolSize:32, //设置拐点大小
      showSymbol:false, //拐点默认不显示，鼠标经过才显示
      itemStyle:{ //可以设置拐点样式
         color:'red'
      }
    }
  ]

8.饼图的样式修改

  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'pie',
      center: ["50%","50%"], //设置饼状图在容器中的位置
      radius: ["40%","60%"], //设置内圆半径和外圆半径，百分比是相对于容器来说的
      lableLine: {show:false},//不显示连接线（文字和图形之间的线）
    }
  ]

9.legend的样式修改：legend里面有一个textStyle来设置legend里面的文本样式

    legend:{
      bottom:10,//还有top，left，right,可以控制位置
      itemHeight:10,//小图标的宽度
      itemWidth:10,
      textStyle:{  //文字样式
       color:'red' 
      }
    }