前言

写项目的时候每次用到echarts图，需要更改它的样式和字体的时候都要查半天才能写出来，好记性不如烂笔头真是亘古不变真理啊，所以就有了今天的这个记录性文章（具体内容以备注形式展示）这里就要用到echarts官网了，如有需要请前往查看(https://echarts.apache.org/examples/zh/index.html)

一、饼状图样式

在你需要引入图表的页面引入import * as echarts from 'echarts';

代码如下（示例）：

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
    // textStyle:{
    //     color:"red"//提示标的文字颜色
    // }
    // itemStyle:{
    //   color:"red"//提示标的小方块图标的颜色
    // }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
          // color:"red"//划过的提示文字颜色
        }
      },
      labelLine: {
        show: false
      },
      // color:["red","blue","green"],//色块颜色
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

option && myChart.setOption(option);

二、柱状图样式

代码如下（示例）：

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
legend: {
    data: ['Forest']
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLabel: {
	    interval: 0,
	    rotate:30,//设置标签倾斜
	    textStyle: {
	      //改变刻度字体样式
	      color: 'rgba(255,255,255,0.5)',
	      fontSize: 12,
	    },
	  },
	  splitLine: {
	    show: false,
	  },
	  axisTick: {
	    //y轴刻度线
	    show: false,
	  },
  },
  yAxis: {
    type: 'value',
    min: 0, //最小
    max: 3500, //最大
    interval: 1000, //相差
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed", //线的类型 虚线0
        opacity: 0.2 //透明度
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    //坐标值标注
    axisLabel: {
      show: true,
      textStyle: {
        color: "#C5DFFB"
      }
    }
  },
  textStyle: {
    color: 'red'
  }, //x,y轴字体颜色
  series: [
    {
    name:'Forest'//提示的标题内容，配合legend下面的data使用
      data: [120, 200, 150, 80, 70, 110, 130],
      color: ['green'], //柱体颜色
      type: 'bar'
    }
  ]
};

option && myChart.setOption(option);

二、折线图样式

代码如下（示例）：

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    show: true
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  textStyle: {
    color: 'red'
  }, //x,y轴字体颜色
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      color: 'red', //折线颜色
      type: 'line',
      smooth: true //是否平滑折线图
    }
  ]
};
 // 注意：stack : {},//堆叠图效果，多条数据不会重叠，起点是相对的 堆叠图去掉stack属性即可得到正常的多数据折线图

option && myChart.setOption(option);

总结

以上就是今天要讲的内容，本文仅仅简单介绍了echarts图样式的一些修改内容，具体的展示效果需要您亲自去查看验证了。