前言

写项目的时候每次用到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']
  },
  yAxis: {
    type: 'value'
  },
  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 //是否平滑折线图
    }
  ]
};

option && myChart.setOption(option);

总结

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