echart 配置项包使用教程

安装图表option包

npm install echart-option

基础柱状图

• 必设配置

 //横坐标
const xData =  你的横坐标数据  ['遂宁市','绵阳市'.....];
//数据源
const yData = 你的数据源  [11,33,44...] 或
const yData = 你的数据源  [{value:12//值,其他你想要的字段....}...]
//areaMap 多类柱状数据
const yData = areaMap.map((item, index) => ({
        name: item.label, //展示lenged
        type: "bar",
        barWidth: 20, //调整柱子宽度
        data: chartData.map((v, index) => {
          return {
            value: v[item.value],
            //其他字段
          };
        }),
      })); 
const barChartOption = deepCopy(getBarBaseOption(xData, yData, true));  //横坐标 数据源 是否开始滚动

• 扩展配置

//自定义tooltip文字
barChartOption.tooltip.formatter = (params) => {
    return params[0].marker + " " + params[0].name + " " + params[0].value;
 };
 
//自定义x轴或y轴文字
barChartOption.yAxis.axisLabel.formatter = (param) =>
 param > 10000 ? `${param / 10000}万` : param;
 
//改变柱子移上去的颜色
barChartOption.tooltip.axisPointer = {
        type: "shadow",
        shadowStyle: {
          color: "rgba(250,173,20,0.1)",
        },
 }
 //改变图表位置方位(后面横向柱状和折线同理)
 barChartOption.grid.left = "..";
 barChartOption.grid.top= "..";
 barChartOption.grid.bottom= "..";
 barChartOption.grid.right= "..";
 

横向柱状图

• 必设配置、扩展配置与基础柱状图大致一样

 //横坐标
const xData =  你的横坐标数据  ['遂宁市','绵阳市'.....];
//数据源
const yData = 你的数据源  [11,33,44...] 或
const yData = 你的数据源  [{value:12//值,其他你想要的字段....}...]
//areaMap 多类柱状数据
const yData = areaMap.map((item, index) => ({
        name: item.label, //展示lenged
        type: "bar",
        stack: "total",//同个类目轴上，系列配置相同的stack，后一个系列的值会加在前一个系列后 设置这个多横向是累加如图1  不设是顺序排列如图二 
        barWidth: 20, //调整柱子宽度
        data: chartData.map((v, index) => {
          return {
            value: v[item.value],
            //其他字段
          };
        }),
      })); 
const barChartOption = deepCopy(getBarBaseOption(xData, yData, true));  //横坐标 数据源 是否开始滚动

点击图表项，背景改变颜色 可参与这篇文章

饼图/环形图

• 必设配置

//数据源
const pieData = chartData.map((item) => ({
        name: item.name,//用于显示lenged字段
        value: item.num,//数据
        proportion: item.proportion,//你任意添加的字段
 }));
const pieChartOption = deepCopy(getPieBaseOption(pieData));

• 扩展配置

//变成环形图
pieChartOption.series[0].radius =  ["50%", "25%"]

//环形图中间加一个文字 如图2
 pieChartOption.graphic.elements[0].style.text = '...';
 pieChartOption.graphic.elements[0].top = "38%"; //根据top设置想要的位置
//环形图中间加两行文字 如图3
 pieChartOption.graphic.elements[0].style.text = '...';
 pieChartOption.graphic.elements[1].style.text = subTitle;

//自定义formatter 
barChartOption.tooltip.formatter = (params) => {
    return params[0].marker + " " + params[0].name + " " + params[0].value;
 };

基础折线图

• 必设配置

//横坐标
 //横坐标
const xData =  你的横坐标数据  ['遂宁市','绵阳市'.....];
//数据源
const yData = 你的数据源  [11,33,44...] 或
const yData = 你的数据源  [{value:12//值,其他你想要的字段....}...]
//areaMap 多类柱状数据
const yData = areaMap.map((item, index) => ({
        name: item.label, //展示lenged
        type: "line",
        smooth: true,//平滑显示
        data: chartData.map((v, index) => {
          return {
            value: v[item.value],
            //其他字段
          };
        }),
      }));
const lineChartOption= deepCopy(getLineBaseOption(xData, yData, true));  //横坐标 数据源 是否开始滚动

• 扩展配置

//自定义tooltip文字
lineChartOption.tooltip.formatter = (params) => {
    return params[0].marker + " " + params[0].name + " " + params[0].value;
 };
 
//自定义x轴或y轴文字
lineChartOption.yAxis.axisLabel.formatter = (param) =>
 param > 10000 ? `${param / 10000}万` : param;

//使用渐变背景 如图一
lineChartOption.series[0].areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: chartType === "areaTrent" ? "rgba(91,146,252,0.1)" : "rgba(252,188,116,0.1)", // 100% 处的颜色
              },
              {
                offset: 1,
                color:
                  chartType === "areaTrent" ? "rgba(91,146,252,0.01)" : "rgba(252,188,116,0.01)", // 0% 处的颜色
              },
            ]), //背景渐变色
          },
        }

特别雷达图

• 在鼠标移动到某个label上时用弹框显示所有轴该指标的值
  具体代码 可参与这篇文章

• 必设配置

//areaMap指标项 第一个指标第二个指标。。。
//data 数据项 第一条数据 第二条数据。。
const radarData = this.areaMap.map((item) => ({ text: item.label })); //indicator数据
const seriesData1 = this.areaMap.map((item) => data[0][item.value]); //data数据
const seriesData2 = this.areaMap.map((item) => data[1][item.value]); //data数据
const option = deepCopy(getRadarExtraOption(radarData, seriesData1, seriesData2));

//设置tooltip展示需要获取的数据
const color = ["#4CDCA4", "#5B92FC", "#ACA4FC", "#FC8484", "#FCBC74"];
areaMap.forEach((item, index) => {
   let initData = [];
       data.forEach((o) => {
          option.series[1].data[index].data = initData; //tooltip需要获取的数据
          option.series[1].data[index].name = item.label;//tooltip需要获取的项名称
          option.series[1].data[index].color = color[index];//tooltip需要获取的mark颜色
        });
});

 //tooltip展示
 radarExtraChartsOption.series[1].tooltip.formatter = (params) => {
        const { data, color } = params.data;
        const mark = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-   color:${color};"></span>`;
        const str = `<span style="color:#666;">${params.name}</span></br>`;
        return `${str}${mark}&nbsp;${data[0]}%<br/>${mark}&nbsp;${data[1]}%<br/>&nbsp;&nbsp;&nbsp;&nbsp;环比&nbsp;${data[2]}%`;
      };

梯形图

• 必设配置

//数据源
const funnelOption = deepCopy(getFunnelOption(chartData));

• 扩展配置

//自定义展示文字
  funnelOption.series[0].label.formatter = (param) => {
       return `你的文字`; \n换行
   };