echart vue项目中将饼状图块设置成渐变色

素颜马尾好姑娘i 2023-07-23 12:59 28阅读 0赞

源码：

<template>

<div>

<div id="myChart" :style="\{width: '300px', height: '300px'\}"></div>

</div>

</template>

<script>

import Vue from "vue";

export default \{

name: "component",

data() \{

return \{\};

\},

mounted() \{

this.drawLine();

\},

methods: \{

//图表

drawLine() \{

// 基于准备好的dom，初始化echarts实例

let myChart = this.$echarts.init(document.getElementById("myChart"));

// 绘制图表

myChart.setOption(\{

title: \{\},

series: \[

\{

name: "demo",

type: "pie",

radius: "55%",

center: \["40%", "50%"\],

data: \[

\{ value: 335, name: "直接访问" \},

\{ value: 310, name: "邮件营销" \},

\{ value: 234, name: "联盟广告" \}

\],

itemStyle: \{

emphasis: \{

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: "rgba(0, 0, 0, 0.5)"

\},

normal: \{

color: function(params) \{

//渐变色列表，自定义自己需要的颜色

var colorList = \[

\{

c1: " \#96665E",

c2: "\#866678"

\},

\{

c1: " \#E666F8",

c2: "\#46668A"

\},

\{

c1: "\#166432",

c2: "\#26649C"

\}

\];

return new echarts.graphic.LinearGradient(1, 0, 0, 0, \[

\{

//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

offset: 0,

color: colorList\[params.dataIndex\].c1

\},

\{

offset: 1,

color: colorList\[params.dataIndex\].c2

\}

\]);

\}

\}

\}

\}

\]

\});

\}

\}

\};

</script>

效果图：

![20200408092014699.png][]

[20200408092014699.png]: /images/20230528/d42cb75961a94bffbfb821d16c6f69c4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts-设置嵌套饼图，外部饼图分段渐变色

需求：外部有个嵌套的饼图，分段渐变色，对应内部饼图区域 ![在这里插入图片描述][2200d7966f7d4bc1a8c7da5f3d2454fe.png] 下方代码

深藏阁楼爱情的钟/ 2024年03月31日 15:10/ 0 赞/ 63 阅读

相关 echart vue项目中将饼状图块设置成渐变色

源码： <template> <div> <div id="myChart" :style="\{width: '300px', height: '300px

素颜马尾好姑娘i/ 2023年07月23日 12:59/ 0 赞/ 29 阅读

相关 vue+highCharts----图表添加渐变色（柱状图、面积图）

柱状图和面积图的设置方式一样，唯一不同的是柱状图的设置属性是color，面积图的设置属性是fillColor。具体代码见文章内容。 1、先上效果图： ![在这里插入

Love The Way You Lie/ 2023年01月15日 03:45/ 0 赞/ 210 阅读

相关给echarts中的饼状图设置颜色

data: [ { value: this.indexData.localAst, name: '本地语音' ,itemStyle:

末蓝、/ 2023年01月11日 09:09/ 0 赞/ 141 阅读

相关 vue echarts饼状图百分比展示

设置label的formatter。 label: { show: true, formatter: '{b} : {d}%' }, 已

谁践踏了优雅/ 2022年10月13日 05:24/ 0 赞/ 573 阅读

相关 ECharts图表------饼状图

效果图: ![SouthEast][] <!DOCTYPE html> <html> <head> <meta charset=

谁借莪１个温暖的怀抱￠/ 2022年06月01日 01:14/ 0 赞/ 352 阅读

相关 Echarts图形设置渐变色

“岑夫子,丹丘生.将进酒,杯莫停” 给柱状图设置渐变色,效果如下: ![这里写图片描述][70] 设置代码如下: series: [

Love The Way You Lie/ 2022年05月25日 03:45/ 0 赞/ 302 阅读

相关 echarts饼状图

使用echarts实现个人月消费统计，下面是我写的一个案例：效果图： ![70][] html代码： <html> <head> <me

川长思鸟来/ 2022年05月14日 01:41/ 0 赞/ 388 阅读

相关 echarts如何给柱状图设置渐变色

在series 的 itemStyle 里面进行设置color的属性值， itemStyle: \{ normal: \{

待我称王封你为后i/ 2022年04月13日 20:49/ 0 赞/ 1293 阅读

相关 echart生成饼状图

//绘制图表. echarts.init(document.getElementById('main')).setOption(\{ tooltip : \{ tr

女爷i/ 2021年09月29日 09:08/ 0 赞/ 498 阅读